@v-c/virtual-list 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 antdv-community
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/Filler.cjs

@@ -0,0 +1 @@
+"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;

package/dist/Filler.d.ts

@@ -0,0 +1,33 @@
+import { PropType, VNode } from 'vue';
+export interface InnerProps {
+    role?: string;
+    id?: string;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    /** Virtual filler height. Should be `count * itemMinHeight` */
+    height: NumberConstructor;
+    /** Set offset of visible items. Should be the top of start item position */
+    offsetY: NumberConstructor;
+    offsetX: NumberConstructor;
+    scrollWidth: NumberConstructor;
+    onInnerResize: PropType<() => void>;
+    innerProps: PropType<InnerProps>;
+    rtl: BooleanConstructor;
+    extra: PropType<VNode>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    /** Virtual filler height. Should be `count * itemMinHeight` */
+    height: NumberConstructor;
+    /** Set offset of visible items. Should be the top of start item position */
+    offsetY: NumberConstructor;
+    offsetX: NumberConstructor;
+    scrollWidth: NumberConstructor;
+    onInnerResize: PropType<() => void>;
+    innerProps: PropType<InnerProps>;
+    rtl: BooleanConstructor;
+    extra: PropType<VNode>;
+}>> & Readonly<{}>, {
+    rtl: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/Filler.js

@@ -0,0 +1,57 @@
+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])]
+      })]);
+    };
+  }
+});
+export {
+  u as default
+};

package/dist/Item.cjs

@@ -0,0 +1 @@
+"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;

package/dist/Item.d.ts

@@ -0,0 +1,18 @@
+import { PropType } from 'vue';
+export interface ItemProps {
+    setRef: (element: HTMLElement | null) => void;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    setRef: {
+        type: PropType<(element: HTMLElement | null) => void>;
+        required: true;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    setRef: {
+        type: PropType<(element: HTMLElement | null) => void>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/Item.js

@@ -0,0 +1,27 @@
+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;
+    };
+  }
+});
+export {
+  i as default
+};

package/dist/List.cjs

@@ -0,0 +1 @@
+"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;

package/dist/List.d.ts

@@ -0,0 +1,108 @@
+import { Key } from '../../util/src/type';
+import { ExtraRenderInfo } from './interface';
+import { PropType, VNode } from 'vue';
+import { InnerProps } from './Filler';
+export interface ScrollInfo {
+    x: number;
+    y: number;
+}
+export interface ListRef {
+    nativeElement?: HTMLDivElement;
+    scrollTo: (arg?: number | ScrollConfig) => void;
+    getScrollInfo: () => ScrollInfo;
+}
+export interface ScrollPos {
+    left?: number;
+    top?: number;
+}
+export interface ScrollTarget {
+    index?: number;
+    key?: Key;
+    align?: 'top' | 'bottom' | 'auto';
+    offset?: number;
+}
+export type ScrollConfig = ScrollTarget | ScrollPos;
+export interface ListProps<T = any> {
+    prefixCls?: string;
+    data?: T[];
+    height?: number;
+    itemHeight?: number;
+    fullHeight?: boolean;
+    itemKey: Key | ((item: T) => Key);
+    component?: string;
+    virtual?: boolean;
+    onScroll?: (e: Event) => void;
+    onVirtualScroll?: (info: ScrollInfo) => void;
+    onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
+    innerProps?: InnerProps;
+    extraRender?: (info: ExtraRenderInfo) => VNode;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    data: {
+        type: PropType<any[]>;
+    };
+    height: NumberConstructor;
+    itemHeight: NumberConstructor;
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    itemKey: {
+        type: PropType<Key | ((item: any) => Key)>;
+        required: true;
+    };
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+    virtual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onScroll: PropType<(e: Event) => void>;
+    onVirtualScroll: PropType<(info: ScrollInfo) => void>;
+    onVisibleChange: PropType<(visibleList: any[], fullList: any[]) => void>;
+    innerProps: PropType<InnerProps>;
+    extraRender: PropType<(info: ExtraRenderInfo) => VNode>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    prefixCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    data: {
+        type: PropType<any[]>;
+    };
+    height: NumberConstructor;
+    itemHeight: NumberConstructor;
+    fullHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    itemKey: {
+        type: PropType<Key | ((item: any) => Key)>;
+        required: true;
+    };
+    component: {
+        type: StringConstructor;
+        default: string;
+    };
+    virtual: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onScroll: PropType<(e: Event) => void>;
+    onVirtualScroll: PropType<(info: ScrollInfo) => void>;
+    onVisibleChange: PropType<(visibleList: any[], fullList: any[]) => void>;
+    innerProps: PropType<InnerProps>;
+    extraRender: PropType<(info: ExtraRenderInfo) => VNode>;
+}>> & Readonly<{}>, {
+    prefixCls: string;
+    component: string;
+    fullHeight: boolean;
+    virtual: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/List.js

@@ -0,0 +1,276 @@
+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);
+}
+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
+};

package/dist/ScrollBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");function L(e,c){return("touches"in e?e.touches[0]:e)[c?"pageX":"pageY"]-window[c?"scrollX":"scrollY"]}const C=t.defineComponent({name:"ScrollBar",props:{prefixCls:{type:String,required:!0},scrollOffset:{type:Number,required:!0},scrollRange:{type:Number,required:!0},rtl:{type:Boolean,default:!1},onScroll:{type:Function,required:!0},onStartMove:{type:Function,required:!0},onStopMove:{type:Function,required:!0},horizontal:{type:Boolean,default:!1},style:Object,thumbStyle:Object,spinSize:{type:Number,required:!0},containerSize:{type:Number,required:!0},showScrollBar:{type:[Boolean,String]}},setup(e,{expose:c}){const a=t.ref(!1),v=t.ref(null),d=t.ref(null),h=t.computed(()=>!e.rtl),g=t.shallowRef(),y=t.shallowRef(),f=t.ref(e.showScrollBar==="optional"?!0:e.showScrollBar);let i=null;const m=()=>{e.showScrollBar===!0||e.showScrollBar===!1||(i&&clearTimeout(i),f.value=!0,i=setTimeout(()=>{f.value=!1},3e3))},b=t.computed(()=>e.scrollRange-e.containerSize||0),M=t.computed(()=>e.containerSize-e.spinSize||0),u=t.computed(()=>e.scrollOffset===0||b.value===0?0:e.scrollOffset/b.value*M.value),w=t.shallowRef({top:u.value,dragging:a.value,pageY:v.value,startTop:d.value});t.watch([u,a,v,d],()=>{w.value={top:u.value,dragging:a.value,pageY:v.value,startTop:d.value}});const O=o=>{o.stopPropagation(),o.preventDefault()},S=o=>{a.value=!0,v.value=L(o,e.horizontal||!1),d.value=w.value.top,e.onStartMove(),o.stopPropagation(),o.preventDefault()};return t.onMounted(()=>{const o=r=>{r.preventDefault()},n=g.value,l=y.value;n&&l&&(n.addEventListener("touchstart",o,{passive:!1}),l.addEventListener("touchstart",S,{passive:!1}),t.onUnmounted(()=>{n.removeEventListener("touchstart",o),l.removeEventListener("touchstart",S)}))}),t.watch(a,o=>{if(o){let n=null;const l=x=>{const{dragging:B,pageY:q,startTop:$}=w.value;n&&cancelAnimationFrame(n);const z=g.value.getBoundingClientRect(),j=e.containerSize/(e.horizontal?z.width:z.height);if(B){const E=(L(x,e.horizontal||!1)-(q||0))*j;let p=$||0;!h.value&&e.horizontal?p-=E:p+=E;const R=b.value,T=M.value,Y=T?p/T:0;let s=Math.ceil(Y*R);s=Math.max(s,0),s=Math.min(s,R),n=requestAnimationFrame(()=>{e.onScroll(s,e.horizontal)})}},r=()=>{a.value=!1,e.onStopMove()};window.addEventListener("mousemove",l,{passive:!0}),window.addEventListener("touchmove",l,{passive:!0}),window.addEventListener("mouseup",r,{passive:!0}),window.addEventListener("touchend",r,{passive:!0}),t.onUnmounted(()=>{window.removeEventListener("mousemove",l),window.removeEventListener("touchmove",l),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r),n&&cancelAnimationFrame(n)})}}),t.watch(()=>e.scrollOffset,()=>{m()}),t.onUnmounted(()=>{i&&clearTimeout(i)}),c({delayHidden:m}),()=>{const o=`${e.prefixCls}-scrollbar`,n={position:"absolute",visibility:f.value?void 0:"hidden"},l={position:"absolute",borderRadius:"99px",background:"var(--vc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))",cursor:"pointer",userSelect:"none"};return e.horizontal?(Object.assign(n,{height:"8px",left:0,right:0,bottom:0}),Object.assign(l,{height:"100%",width:`${e.spinSize}px`,[h.value?"left":"right"]:`${u.value}px`})):(Object.assign(n,{width:"8px",top:0,bottom:0,[h.value?"right":"left"]:0}),Object.assign(l,{width:"100%",height:`${e.spinSize}px`,top:`${u.value}px`})),t.createVNode("div",{ref:g,class:[o,{[`${o}-horizontal`]:e.horizontal,[`${o}-vertical`]:!e.horizontal,[`${o}-visible`]:f.value}],style:{...n,...e.style},onMousedown:O,onMousemove:m},[t.createVNode("div",{ref:y,class:[`${o}-thumb`,{[`${o}-thumb-moving`]:a.value}],style:{...l,...e.thumbStyle},onMousedown:S},null)])}}});exports.default=C;