@v-c/virtual-list 0.0.1 → 1.0.0

package/dist/List.js

@@ -1,276 +1,405 @@
-import { defineComponent as ae, computed as y, ref as r, shallowRef as ue, watch as T, createVNode as b, isVNode as re } from "vue";
-import ce from "@v-c/resize-observer";
-import se from "./Filler.js";
-import fe from "./hooks/useDiffItem.js";
-import ve from "./hooks/useFrameWheel.js";
-import { useGetSize as he } from "./hooks/useGetSize.js";
-import de from "./hooks/useHeights.js";
-import me from "./hooks/useMobileTouchMove.js";
-import ge from "./hooks/useScrollDrag.js";
-import Se from "./Item.js";
-import ye from "./ScrollBar.js";
-import { getSpinSize as xe } from "./utils/scrollbarUtil.js";
-function W(l) {
-  return typeof l == "function" || Object.prototype.toString.call(l) === "[object Object]" && !re(l);
+import Filler_default from "./Filler.js";
+import Item_default from "./Item.js";
+import useDiffItem from "./hooks/useDiffItem.js";
+import useFrameWheel from "./hooks/useFrameWheel.js";
+import { useGetSize } from "./hooks/useGetSize.js";
+import useHeights from "./hooks/useHeights.js";
+import useMobileTouchMove from "./hooks/useMobileTouchMove.js";
+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, 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);
 }
-const He = [], be = {
-  overflowY: "auto",
-  overflowAnchor: "none"
-}, Ke = /* @__PURE__ */ ae({
-  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: Y,
-    attrs: k,
-    slots: _
-  }) {
-    const h = (e) => typeof l.itemKey == "function" ? l.itemKey(e) : e?.[l.itemKey], [D, P, m, X] = de(h, void 0, void 0), o = y(() => l.data || He), M = y(() => !!(l.virtual !== !1 && l.height && l.itemHeight)), E = y(() => Object.values(m.maps).reduce((e, t) => e + t, 0)), d = y(() => {
-      const e = o.value;
-      return M.value && e && Math.max(l.itemHeight * e.length, E.value) > l.height;
-    }), R = r(), B = r(), F = r(), K = ue(), f = r(0), x = r(0), V = r(!1), j = r(0), L = r(0);
-    function g(e) {
-      let t;
-      typeof e == "function" ? t = e(f.value) : t = e;
-      const i = c.value - l.height, n = Math.max(0, Math.min(t, i || 0));
-      R.value && (R.value.scrollTop = n), f.value = n;
-    }
-    fe(o, h);
-    const c = r(0), S = r(0), H = r(0), C = r(void 0);
-    T([() => d.value, () => M.value, () => f.value, () => o.value, () => X.value, () => l.height], () => {
-      if (!M.value) {
-        c.value = 0, S.value = 0, H.value = o.value.length - 1, C.value = void 0;
-        return;
-      }
-      if (!d.value) {
-        c.value = B.value?.offsetHeight || 0, S.value = 0, H.value = o.value.length - 1, C.value = void 0;
-        return;
-      }
-      let e = 0, t, i, n;
-      const u = o.value.length, v = o.value;
-      for (let a = 0; a < u; a += 1) {
-        const s = v[a], w = h(s), N = m.get(w), A = e + (N === void 0 ? l.itemHeight : N);
-        A >= f.value && t === void 0 && (t = a, i = e), A > f.value + l.height && n === void 0 && (n = a), e = A;
-      }
-      t === void 0 && (t = 0, i = 0, n = Math.ceil(l.height / l.itemHeight)), n === void 0 && (n = o.value.length - 1), n = Math.min(n + 1, o.value.length - 1), c.value = e, S.value = t, H.value = n, C.value = i;
-    }, {
-      immediate: !0
-    }), T(() => c.value, () => {
-      const e = m.getRecord();
-      if (e.size === 1) {
-        const t = Array.from(e.keys())[0], i = e.get(t), n = o.value[S.value];
-        if (n && i === void 0 && h(n) === t) {
-          const a = m.get(t) - l.itemHeight;
-          g((s) => s + a);
-        }
-      }
-      m.resetRecord();
-    });
-    const I = r({
-      width: 0,
-      height: l.height || 0
-    }), $ = (e) => {
-      I.value = {
-        width: e.offsetWidth,
-        height: e.offsetHeight
-      };
-    }, z = () => ({
-      x: x.value,
-      y: f.value
-    }), O = r(z()), q = (e) => {
-      if (l.onVirtualScroll) {
-        const t = {
-          ...z(),
-          ...e
-        };
-        (O.value.x !== t.x || O.value.y !== t.y) && (l.onVirtualScroll(t), O.value = t);
-      }
-    }, G = y(() => f.value === 0), U = y(() => f.value + l.height >= c.value), J = y(() => x.value === 0), Q = y(() => x.value + I.value.width >= L.value), Z = () => {
-      K.value?.delayHidden();
-    }, [p] = ve(
-      d,
-      G,
-      U,
-      J,
-      Q,
-      !1,
-      // horizontalScroll
-      (e, t) => {
-        t || g((i) => i + e);
-      }
-    );
-    me(d, R, (e, t, i, n) => e ? !1 : (g((u) => u + t), !0)), ge(d, R, (e) => {
-      g((t) => t + e);
-    });
-    const ee = (e, t) => {
-      t || g(e);
-    }, te = () => {
-      V.value = !0;
-    }, le = () => {
-      V.value = !1;
-    };
-    T([() => l.height, () => c.value, () => d.value, () => I.value.height], () => {
-      d.value && l.height && c.value && (j.value = xe(I.value.height, c.value));
-    }, {
-      immediate: !0
-    });
-    function ne(e) {
-      const i = e.currentTarget.scrollTop;
-      i !== f.value && g(i), l.onScroll?.(e), q();
-    }
-    Y({
-      nativeElement: F,
-      getScrollInfo: z,
-      scrollTo: (e) => {
-        if (e != null) {
-          if (typeof e == "number")
-            g(e);
-          else if (e && typeof e == "object") {
-            let t;
-            if ("left" in e && (x.value = e.left || 0), "top" in e)
-              t = e.top;
-            else if ("index" in e) {
-              const i = e.index || 0;
-              if (o.value[i]) {
-                let u = 0;
-                for (let v = 0; v < i; v += 1) {
-                  const a = h(o.value[v]), s = m.get(a);
-                  u += s === void 0 ? l.itemHeight : s;
-                }
-                t = u;
-              }
-            } else if ("key" in e) {
-              const i = o.value.findIndex((n) => h(n) === e.key);
-              if (i >= 0) {
-                let n = 0;
-                for (let u = 0; u < i; u += 1) {
-                  const v = h(o.value[u]), a = m.get(v);
-                  n += a === void 0 ? l.itemHeight : a;
-                }
-                t = n;
-              }
-            }
-            t !== void 0 && g(t);
-          }
-        }
-      }
-    }), T([() => S.value, () => H.value, () => o.value], () => {
-      if (l.onVisibleChange) {
-        const e = o.value.slice(S.value, H.value + 1);
-        l.onVisibleChange(e, o.value);
-      }
-    });
-    const ie = () => {
-      const e = [], t = o.value, i = _.default;
-      if (!i)
-        return e;
-      for (let n = S.value; n <= H.value; n += 1) {
-        const u = t[n], v = h(u), a = i({
-          item: u,
-          index: n,
-          style: {},
-          offsetX: x.value
-        }), s = Array.isArray(a) ? a[0] : a;
-        s && e.push(b(Se, {
-          key: v,
-          setRef: (w) => D(u, w)
-        }, W(s) ? s : {
-          default: () => [s]
-        }));
-      }
-      return e;
-    }, oe = he(o, h, m, l.itemHeight);
-    return () => {
-      let e;
-      const t = {};
-      l.height && (t[l.fullHeight ? "height" : "maxHeight"] = `${l.height}px`, Object.assign(t, be), M.value && (t.overflowY = "hidden", L.value && (t.overflowX = "hidden"), V.value && (t.pointerEvents = "none")));
-      const i = l.extraRender?.({
-        start: S.value,
-        end: H.value,
-        virtual: d.value,
-        offsetX: x.value,
-        offsetY: C.value || 0,
-        rtl: !1,
-        getSize: oe.value
-      }), n = l.component;
-      return b("div", {
-        ref: F,
-        style: {
-          position: "relative",
-          ...k.style
-        },
-        class: [l.prefixCls, k.class]
-      }, [b(ce, {
-        onResize: $
-      }, {
-        default: () => [b(n, {
-          class: `${l.prefixCls}-holder`,
-          style: t,
-          ref: R,
-          onScroll: ne,
-          onWheel: p,
-          onMouseenter: Z
-        }, {
-          default: () => [b(se, {
-            prefixCls: l.prefixCls,
-            height: c.value,
-            offsetX: x.value,
-            offsetY: C.value,
-            onInnerResize: P,
-            ref: B,
-            innerProps: l.innerProps,
-            rtl: !1,
-            extra: i
-          }, W(e = ie()) ? e : {
-            default: () => [e]
-          })]
-        })]
-      }), d.value && c.value > (l.height || 0) && b(ye, {
-        ref: K,
-        prefixCls: l.prefixCls,
-        scrollOffset: f.value,
-        scrollRange: c.value,
-        rtl: !1,
-        onScroll: ee,
-        onStartMove: te,
-        onStopMove: le,
-        spinSize: j.value,
-        containerSize: I.value.height,
-        showScrollBar: "optional"
-      }, null)]);
-    };
-  }
-});
-export {
-  Ke as default
+var EMPTY_DATA = [];
+var ScrollStyle = {
+	overflowY: "auto",
+	overflowAnchor: "none"
 };
+var List_default = /* @__PURE__ */ 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 = computed(() => props.itemHeight);
+		const getKey = (item) => {
+			if (typeof props.itemKey === "function") return props.itemKey(item);
+			return item?.[props.itemKey];
+		};
+		const [setInstanceRef, collectHeight, heights, heightUpdatedMark] = useHeights(getKey, void 0, void 0);
+		const mergedData = computed(() => 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);
+		});
+		const componentRef = ref();
+		const fillerInnerRef = ref();
+		const containerRef = ref();
+		const verticalScrollBarRef = shallowRef();
+		const horizontalScrollBarRef = shallowRef();
+		const offsetTop = ref(0);
+		const offsetLeft = ref(0);
+		const scrollMoving = ref(false);
+		const verticalScrollBarSpinSize = ref(0);
+		const horizontalScrollBarSpinSize = ref(0);
+		const contentScrollWidth = ref(props.scrollWidth || 0);
+		const scrollHeight = ref(0);
+		const start = ref(0);
+		const end = ref(0);
+		const fillerOffset = 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;
+		}
+		useDiffItem(mergedData, getKey);
+		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 });
+		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 = 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 = computed(() => props.direction === "rtl");
+		const getVirtualScrollInfo = () => ({
+			x: isRTL.value ? -offsetLeft.value : offsetLeft.value,
+			y: offsetTop.value
+		});
+		const lastVirtualScrollInfo = 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 = computed(() => Math.max(0, (contentScrollWidth.value || 0) - size.value.width));
+		const isScrollAtTop = computed(() => offsetTop.value === 0);
+		const isScrollAtBottom = computed(() => offsetTop.value + props.height >= scrollHeight.value);
+		const isScrollAtLeft = computed(() => offsetLeft.value === 0);
+		const isScrollAtRight = 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] = useFrameWheel(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);
+		});
+		useMobileTouchMove(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;
+			}
+		});
+		useScrollDrag(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;
+		};
+		watch([
+			() => props.height,
+			scrollHeight,
+			inVirtual,
+			() => size.value.height
+		], () => {
+			if (inVirtual.value && props.height && scrollHeight.value) verticalScrollBarSpinSize.value = getSpinSize(size.value.height, scrollHeight.value);
+		}, { immediate: true });
+		watch([() => size.value.width, () => contentScrollWidth.value], () => {
+			if (inVirtual.value && contentScrollWidth.value) horizontalScrollBarSpinSize.value = getSpinSize(size.value.width, contentScrollWidth.value);
+		}, { immediate: true });
+		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 = useScrollTo(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);
+			}
+		});
+		watch([
+			start,
+			end,
+			mergedData
+		], () => {
+			if (props.onVisibleChange) {
+				const renderList = mergedData.value.slice(start.value, end.value + 1);
+				props.onVisibleChange(renderList, mergedData.value);
+			}
+		});
+		const getSize = 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(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`;
+				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 createVNode("div", mergeProps({ "ref": containerRef }, pureAttrs(attrs), {
+				"style": {
+					position: "relative",
+					...attrs.style
+				},
+				"dir": isRTL.value ? "rtl" : void 0,
+				"class": [
+					props.prefixCls,
+					{ [`${props.prefixCls}-rtl`]: isRTL.value },
+					attrs.class
+				]
+			}), [
+				createVNode(ResizeObserver, { "onResize": onHolderResize }, { default: () => [createVNode(Component, {
+					"class": `${props.prefixCls}-holder`,
+					"style": componentStyle,
+					"ref": componentRef,
+					"onScroll": onFallbackScroll,
+					"onWheel": onWheel,
+					"onMouseenter": delayHideScrollBar
+				}, { default: () => [createVNode(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) && createVNode(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 && createVNode(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)
+			]);
+		};
+	}
+});
+export { List_default as default };