virtua 0.36.2 → 0.37.0

package/lib/svelte/Virtualizer.svelte

@@ -1,16 +1,14 @@
 <script lang="ts" generics="T">
   import { onMount, onDestroy } from "svelte";
   import {
-    SCROLL_IDLE,
     type StateVersion,
-    getOverscanedRange,
     CHANGE_ITEM_LENGTH,
     createVirtualizer,
     FIX_SCROLL_JUMP,
     GET_ITEM_OFFSET,
     GET_JUMP_COUNT,
     GET_RANGE,
-    GET_SCROLL_DIRECTION,
+    GET_IS_SCROLLING,
     GET_SCROLL_OFFSET,
     GET_SCROLL_SIZE,
     GET_TOTAL_SIZE,
@@ -25,6 +23,9 @@
     CHANGE_START_MARGIN,
     GET_START_SPACER_SIZE,
     GET_ITEMS_LENGTH,
+    GET_ITEM_SIZE,
+    GET_START_INDEX,
+    GET_END_INDEX,
   } from "./core";
   import { defaultGetKey, styleToString } from "./utils";
   import ListItem from "./ListItem.svelte";
@@ -38,7 +39,7 @@
     as = "div",
     item: itemAs,
     scrollRef,
-    overscan = 4,
+    overscan,
     itemSize,
     shift = false,
     horizontal = false,
@@ -46,12 +47,12 @@
     children,
     onscroll,
     onscrollend,
-    onrangechange,
   }: Props = $props();
 
   const virtualizer = createVirtualizer(
     data.length,
     itemSize,
+    overscan,
     horizontal,
     (v) => {
       rerender = v;
@@ -69,20 +70,9 @@
   let rerender: StateVersion = $state([]);
 
   let range = $derived(rerender && virtualizer[GET_RANGE]());
-  let scrollDirection = $derived(
-    rerender && virtualizer[GET_SCROLL_DIRECTION]()
-  );
+  let isScrolling = $derived(rerender && virtualizer[GET_IS_SCROLLING]());
   let totalSize = $derived(rerender && virtualizer[GET_TOTAL_SIZE]());
   let jumpCount = $derived(rerender && virtualizer[GET_JUMP_COUNT]());
-  let extendedRange = $derived(
-    getOverscanedRange(
-      range[0],
-      range[1],
-      overscan,
-      scrollDirection,
-      data.length
-    )
-  );
 
   onMount(() => {
     if (scrollRef) {
@@ -114,14 +104,6 @@
     virtualizer[FIX_SCROLL_JUMP]();
   });
 
-  let prevRange: typeof range | undefined;
-  $effect(() => {
-    if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
-      return;
-    prevRange = range;
-    onrangechange && onrangechange(range[0], range[1]);
-  });
-
   export const getScrollOffset = virtualizer[
     GET_SCROLL_OFFSET
   ] satisfies VirtualizerHandle["getScrollOffset"] as VirtualizerHandle["getScrollOffset"];
@@ -131,6 +113,18 @@
   export const getViewportSize = virtualizer[
     GET_VIEWPORT_SIZE
   ] satisfies VirtualizerHandle["getViewportSize"] as VirtualizerHandle["getViewportSize"];
+  export const getStartIndex = virtualizer[
+    GET_START_INDEX
+  ] satisfies VirtualizerHandle["getStartIndex"] as VirtualizerHandle["getStartIndex"];
+  export const getEndIndex = virtualizer[
+    GET_END_INDEX
+  ] satisfies VirtualizerHandle["getEndIndex"] as VirtualizerHandle["getEndIndex"];
+  export const getItemOffset = virtualizer[
+    GET_ITEM_OFFSET
+  ] satisfies VirtualizerHandle["getItemOffset"] as VirtualizerHandle["getItemOffset"];
+  export const getItemSize = virtualizer[
+    GET_ITEM_SIZE
+  ] satisfies VirtualizerHandle["getItemSize"] as VirtualizerHandle["getItemSize"];
   export const scrollToIndex = virtualizer[
     SCROLL_TO_INDEX
   ] satisfies VirtualizerHandle["scrollToIndex"] as VirtualizerHandle["scrollToIndex"];
@@ -142,7 +136,7 @@
   ] satisfies VirtualizerHandle["scrollBy"] as VirtualizerHandle["scrollBy"];
 
   let items = $derived.by(() => {
-    const [startIndex, endIndex] = extendedRange;
+    const [startIndex, endIndex] = range;
     const newItems: T[] = [];
     for (let i = startIndex, j = endIndex; i <= j; i++) {
       newItems.push(data[i]!);
@@ -159,7 +153,7 @@
       visibility: "hidden", // TODO replace with other optimization methods
       width: horizontal ? totalSize + "px" : "100%",
       height: horizontal ? "100%" : totalSize + "px",
-      "pointer-events": scrollDirection !== SCROLL_IDLE ? "none" : undefined,
+      "pointer-events": isScrolling ? "none" : undefined,
     })
   );
 </script>
@@ -169,8 +163,8 @@
   Customizable list virtualizer for advanced usage. See {@link VirtualizerProps} and {@link VirtualizerHandle}.
 -->
 <svelte:element this={as} bind:this={containerRef} style={containerStyle}>
-  {#each items as item, i (getKey(item, i + extendedRange[0]))}
-    {@const index = i + extendedRange[0]}
+  {#each items as item, i (getKey(item, i + range[0]))}
+    {@const index = i + range[0]}
     <ListItem
       {children}
       {item}

package/lib/svelte/Virtualizer.svelte.d.ts

@@ -8,6 +8,10 @@ declare class __sveltets_Render<T> {
         getScrollOffset: () => number;
         getScrollSize: () => number;
         getViewportSize: () => number;
+        getStartIndex: () => number;
+        getEndIndex: () => number;
+        getItemOffset: (index: number) => number;
+        getItemSize: (index: number) => number;
         scrollToIndex: (index: number, opts?: import("../core/types").ScrollToIndexOpts) => void;
         scrollTo: (offset: number) => void;
         scrollBy: (offset: number) => void;

package/lib/svelte/Virtualizer.type.d.ts

@@ -66,12 +66,6 @@ export interface VirtualizerProps<T> {
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
-    /**
-     * Callback invoked when visible items range changes.
-     * @param startIndex The start index of viewable items.
-     * @param endIndex The end index of viewable items.
-     */
-    onrangechange?: (startIndex: number, endIndex: number) => void;
 }
 /**
  * Methods of {@link Virtualizer}.
@@ -89,6 +83,24 @@ export interface VirtualizerHandle {
      * Get current offsetHeight, or offsetWidth if horizontal: true.
      */
     getViewportSize: () => number;
+    /**
+     * Get the start index of visible range of items.
+     */
+    getStartIndex: () => number;
+    /**
+     * Get the end index of visible range of items.
+     */
+    getEndIndex: () => number;
+    /**
+     * Get item offset from start.
+     * @param index index of item
+     */
+    getItemOffset(index: number): number;
+    /**
+     * Get item size.
+     * @param index index of item
+     */
+    getItemSize(index: number): number;
     /**
      * Scroll to the item specified by index.
      * @param index index of item

package/lib/svelte/WindowVirtualizer.svelte

@@ -1,48 +1,55 @@
 <script lang="ts" generics="T">
   import { onMount, onDestroy } from "svelte";
   import {
-    SCROLL_IDLE,
     type StateVersion,
-    getOverscanedRange,
     CHANGE_ITEM_LENGTH,
     createWindowVirtualizer,
     FIX_SCROLL_JUMP,
     GET_ITEM_OFFSET,
     GET_JUMP_COUNT,
     GET_RANGE,
-    GET_SCROLL_DIRECTION,
+    GET_IS_SCROLLING,
     GET_TOTAL_SIZE,
     IS_ITEM_HIDDEN,
     OBSERVE_ITEM_RESIZE,
     ON_MOUNT,
     ON_UN_MOUNT,
     GET_ITEMS_LENGTH,
+    GET_START_INDEX,
+    GET_END_INDEX,
   } from "./core";
   import { defaultGetKey, styleToString } from "./utils";
   import ListItem from "./ListItem.svelte";
-  import type { WindowVirtualizerProps } from "./WindowVirtualizer.type";
+  import type {
+    WindowVirtualizerHandle,
+    WindowVirtualizerProps,
+  } from "./WindowVirtualizer.type";
 
   interface Props extends WindowVirtualizerProps<T> {}
 
   let {
     data,
     getKey = defaultGetKey,
-    overscan = 4,
+    overscan,
     itemSize,
     shift = false,
     horizontal = false,
     children,
+    onscroll,
     onscrollend,
-    onrangechange,
   }: Props = $props();
 
   const virtualizer = createWindowVirtualizer(
     data.length,
     itemSize,
+    overscan,
     horizontal,
     (v) => {
       rerender = v;
     },
+    (offset) => {
+      onscroll && onscroll(offset);
+    },
     () => {
       onscrollend && onscrollend();
     }
@@ -53,20 +60,9 @@
   let rerender: StateVersion = $state([]);
 
   let range = $derived(rerender && virtualizer[GET_RANGE]());
-  let scrollDirection = $derived(
-    rerender && virtualizer[GET_SCROLL_DIRECTION]()
-  );
+  let isScrolling = $derived(rerender && virtualizer[GET_IS_SCROLLING]());
   let totalSize = $derived(rerender && virtualizer[GET_TOTAL_SIZE]());
   let jumpCount = $derived(rerender && virtualizer[GET_JUMP_COUNT]());
-  let extendedRange = $derived(
-    getOverscanedRange(
-      range[0],
-      range[1],
-      overscan,
-      scrollDirection,
-      data.length
-    )
-  );
 
   onMount(() => {
     virtualizer[ON_MOUNT](containerRef!);
@@ -88,16 +84,15 @@
     virtualizer[FIX_SCROLL_JUMP]();
   });
 
-  let prevRange: typeof range | undefined;
-  $effect(() => {
-    if (prevRange && prevRange[0] === range[0] && prevRange[1] === range[1])
-      return;
-    prevRange = range;
-    onrangechange && onrangechange(range[0], range[1]);
-  });
+  export const getStartIndex = virtualizer[
+    GET_START_INDEX
+  ] satisfies WindowVirtualizerHandle["getStartIndex"] as WindowVirtualizerHandle["getStartIndex"];
+  export const getEndIndex = virtualizer[
+    GET_END_INDEX
+  ] satisfies WindowVirtualizerHandle["getEndIndex"] as WindowVirtualizerHandle["getEndIndex"];
 
   let items = $derived.by(() => {
-    const [startIndex, endIndex] = extendedRange;
+    const [startIndex, endIndex] = range;
     const newItems: T[] = [];
     for (let i = startIndex, j = endIndex; i <= j; i++) {
       newItems.push(data[i]!);
@@ -114,7 +109,7 @@
       visibility: "hidden", // TODO replace with other optimization methods
       width: horizontal ? totalSize + "px" : "100%",
       height: horizontal ? "100%" : totalSize + "px",
-      "pointer-events": scrollDirection !== SCROLL_IDLE ? "none" : undefined,
+      "pointer-events": isScrolling ? "none" : undefined,
     })
   );
 </script>
@@ -124,8 +119,8 @@
   {@link Virtualizer} controlled by the window scrolling. See {@link WindowVirtualizerProps} and {@link WindowVirtualizerHandle}.
 -->
 <div bind:this={containerRef} style={containerStyle}>
-  {#each items as item, i (getKey(item, i + extendedRange[0]))}
-    {@const index = i + extendedRange[0]}
+  {#each items as item, i (getKey(item, i + range[0]))}
+    {@const index = i + range[0]}
     <ListItem
       {children}
       {item}

package/lib/svelte/WindowVirtualizer.svelte.d.ts

@@ -4,7 +4,10 @@ declare class __sveltets_Render<T> {
     events(): {};
     slots(): {};
     bindings(): "";
-    exports(): {};
+    exports(): {
+        getStartIndex: () => number;
+        getEndIndex: () => number;
+    };
 }
 interface $$IsomorphicComponent {
     new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {

package/lib/svelte/WindowVirtualizer.type.d.ts

@@ -37,14 +37,26 @@ export interface WindowVirtualizerProps<T> {
      * If true, rendered as a horizontally scrollable list. Otherwise rendered as a vertically scrollable list.
      */
     horizontal?: boolean;
+    /**
+     * Callback invoked whenever scroll offset changes.
+     * @param offset Current scrollTop, or scrollLeft if horizontal: true.
+     */
+    onscroll?: (offset: number) => void;
     /**
      * Callback invoked when scrolling stops.
      */
     onscrollend?: () => void;
+}
+/**
+ * Methods of {@link WindowVirtualizer}.
+ */
+export interface WindowVirtualizerHandle {
+    /**
+     * Get the start index of visible range of items.
+     */
+    getStartIndex: () => number;
     /**
-     * Callback invoked when visible items range changes.
-     * @param startIndex The start index of viewable items.
-     * @param endIndex The end index of viewable items.
+     * Get the end index of visible range of items.
      */
-    onrangechange?: (startIndex: number, endIndex: number) => void;
+    getEndIndex: () => number;
 }

package/lib/svelte/WindowVirtualizer.type.js

@@ -1,10 +1 @@
 export {};
-// /**
-//  * Methods of {@link WindowVirtualizer}.
-//  */
-// export interface WindowVirtualizerHandle {
-//   /**
-//    * Get current {@link CacheSnapshot}.
-//    */
-//   readonly cache: CacheSnapshot;
-// }

package/lib/svelte/core.d.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import { type StateVersion } from "../core/store";
-export { SCROLL_IDLE, type StateVersion, getOverscanedRange, } from "../core/store";
+export { type StateVersion } from "../core/store";
 export { isRTLDocument } from "../core/environment";
 export type { ItemResizeObserver } from "../core/resizer";
 export declare const ON_MOUNT = 0;
@@ -9,63 +9,71 @@ export declare const GET_RANGE = 2;
 export declare const GET_TOTAL_SIZE = 3;
 export declare const GET_VIEWPORT_SIZE = 4;
 export declare const GET_SCROLL_OFFSET = 5;
-export declare const GET_SCROLL_DIRECTION = 6;
+export declare const GET_IS_SCROLLING = 6;
 export declare const GET_JUMP_COUNT = 7;
 export declare const GET_ITEM_OFFSET = 8;
-export declare const IS_ITEM_HIDDEN = 9;
-export declare const GET_ITEMS_LENGTH = 10;
-export declare const GET_START_SPACER_SIZE = 11;
-export declare const OBSERVE_ITEM_RESIZE = 12;
-export declare const FIX_SCROLL_JUMP = 13;
-export declare const CHANGE_ITEM_LENGTH = 14;
-export declare const CHANGE_START_MARGIN = 15;
-export declare const GET_SCROLL_SIZE = 16;
-export declare const SCROLL_TO = 17;
-export declare const SCROLL_BY = 18;
-export declare const SCROLL_TO_INDEX = 19;
+export declare const GET_ITEM_SIZE = 9;
+export declare const IS_ITEM_HIDDEN = 10;
+export declare const GET_ITEMS_LENGTH = 11;
+export declare const GET_START_SPACER_SIZE = 12;
+export declare const OBSERVE_ITEM_RESIZE = 13;
+export declare const FIX_SCROLL_JUMP = 14;
+export declare const CHANGE_ITEM_LENGTH = 15;
+export declare const CHANGE_START_MARGIN = 16;
+export declare const GET_SCROLL_SIZE = 17;
+export declare const SCROLL_TO = 18;
+export declare const SCROLL_BY = 19;
+export declare const SCROLL_TO_INDEX = 20;
+export declare const GET_START_INDEX = 21;
+export declare const GET_END_INDEX = 22;
 /**
  * This function is workaround for terser minification.
  * Svelte doesn't seem to have a good way to modify and print its AST.
  */
-export declare const createVirtualizer: (count: number, itemSize: number | undefined, horizontal: boolean, onUpdate: (v: StateVersion) => void, onScroll: (offset: number) => void, onScrollEnd: () => void) => {
+export declare const createVirtualizer: (count: number, itemSize: number | undefined, overscan: number | undefined, horizontal: boolean, onUpdate: (v: StateVersion) => void, onScroll: (offset: number) => void, onScrollEnd: () => void) => {
     0: (scrollable: HTMLElement) => void;
     1: () => void;
     2: () => import("../core/types").ItemsRange;
     3: () => number;
     4: () => number;
     5: () => number;
-    6: () => import("../core/store").ScrollDirection;
+    6: () => boolean;
     7: () => number;
     8: (index: number) => number;
-    9: (index: number) => boolean;
-    10: () => number;
+    9: (index: number) => number;
+    10: (index: number) => boolean;
     11: () => number;
-    12: import("./core").ItemResizeObserver;
-    13: () => void;
-    14: (len: number, shift?: boolean) => void;
-    15: (value: number) => void;
-    16: () => number;
-    17: (offset: number) => void;
+    12: () => number;
+    13: import("./core").ItemResizeObserver;
+    14: () => void;
+    15: (len: number, shift?: boolean) => void;
+    16: (value: number) => void;
+    17: () => number;
     18: (offset: number) => void;
-    19: (index: number, opts?: import("..").ScrollToIndexOpts) => void;
+    19: (offset: number) => void;
+    20: (index: number, opts?: import("..").ScrollToIndexOpts) => void;
+    21: () => number;
+    22: () => number;
 };
 /**
  * This function is workaround for terser minification.
  * Svelte doesn't seem to have a good way to modify and print its AST.
  */
-export declare const createWindowVirtualizer: (count: number, itemSize: number | undefined, horizontal: boolean, onUpdate: (v: StateVersion) => void, onScrollEnd: () => void) => {
+export declare const createWindowVirtualizer: (count: number, itemSize: number | undefined, overscan: number | undefined, horizontal: boolean, onUpdate: (v: StateVersion) => void, onScroll: (offset: number) => void, onScrollEnd: () => void) => {
     0: (scrollable: HTMLElement) => void;
     1: () => void;
     2: () => import("../core/types").ItemsRange;
     3: () => number;
     4: () => number;
     5: () => number;
-    6: () => import("../core/store").ScrollDirection;
+    6: () => boolean;
     7: () => number;
     8: (index: number) => number;
-    9: (index: number) => boolean;
-    10: () => number;
-    12: import("./core").ItemResizeObserver;
-    13: () => void;
-    14: (len: number, shift?: boolean) => void;
+    10: (index: number) => boolean;
+    11: () => number;
+    13: import("./core").ItemResizeObserver;
+    14: () => void;
+    15: (len: number, shift?: boolean) => void;
+    21: () => number;
+    22: () => number;
 };

package/lib/svelte/core.js

@@ -1 +1 @@
-const e=null,{min:t,max:o,abs:r,floor:n}=Math,s=setTimeout,c=(e,r,n)=>t(n,o(r,e)),i="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},l=e=>{let t,o;return(...r)=>(t||(t=!0,o=e(...r)),o)},u=-1,a=(e,t,o)=>{const r=o?"unshift":"push";for(let o=0;o<t;o++)e[r](u);return e},f=(e,t)=>{const o=e.t[t];return o===u?e.o:o},_=(e,o,r)=>{const n=e.t[o]===u;return e.t[o]=r,e.i=t(o,e.i),n},d=(e,t)=>{if(!e.l)return 0;if(e.i>=t)return e.u[t];e.i<0&&(e.u[0]=0,e.i=0);let o=e.i,r=e.u[o];for(;o<t;)r+=f(e,o),e.u[++o]=r;return e.i=t,r},h=(e,t,o=0,r=e.l-1)=>{for(;o<=r;){const s=n((o+r)/2),c=d(e,s);if(c<=t){if(c+f(e,s)>t)return s;o=s+1}else r=s-1}return c(o,0,e.l-1)},p=(e,o,r)=>{const n=o-e.l;return e.i=r?-1:t(o-1,e.i),e.l=o,n>0?(a(e.u,n),a(e.t,n,r),e.o*n):(e.u.splice(n),(r?e.t.splice(0,-n):e.t.splice(n)).reduce(((t,o)=>t-(o===u?e.o:o)),0))},m="undefined"!=typeof window,g=()=>document.documentElement,v=e=>e.ownerDocument,b=e=>e.defaultView,w=/*#__PURE__*/l((()=>!!m&&"rtl"===getComputedStyle(g()).direction)),S=/*#__PURE__*/l((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),k=/*#__PURE__*/l((()=>"scrollBehavior"in g().style)),I=0,y=(e,r,n,s,c)=>(1!==s&&(e-=o(0,n)),2!==s&&(r+=o(0,n)),[o(e,0),t(r,c-1)]),z=(n,s=40,c=0,i,l=!1)=>{let m=!!c,g=[],v=0,b=0,w=0,k=0,I=0,y=0,z=0,x=0,T=0,R=m?[0,o(c-1,0)]:e,J=[0,0],M=0;const C=((e,t)=>({o:t,t:a([],e),l:e,i:-1,u:a([],e)}))(n,s),L=new Set,O=()=>w-b,P=e=>((e,o,r,n)=>{if(n=t(n,e.l-1),d(e,n)<=o){const t=h(e,o+r,n);return[h(e,o,n,t),t]}{const t=h(e,o,void 0,n);return[t,h(e,o+r,t)]}})(C,e,v,J[0]),W=()=>(e=>e.l?d(e,e.l-1)+f(e,e.l-1):0)(C),q=e=>d(C,e)-y,B=e=>f(C,e),D=e=>{e&&(S()&&0!==x?y+=e:(I+=e,k++))};return{_:()=>g,h:()=>(e=>[e.t.slice(),e.o])(C),p:()=>z?J:(J=P(o(0,O()+y+I)),R?[t(J[0],R[0]),o(J[1],R[1])]:J),m:e=>C.t[e]===u,v:()=>!!R&&C.t.slice(o(0,R[0]-1),t(C.l-1,R[1]+1)+1).includes(u),S:q,k:B,I:()=>C.l,T:()=>w,R:()=>x,J:()=>v,M:()=>b,C:W,L:()=>k,O:()=>(z=I,I=0,[z,2===T||O()+v>=W()]),P(e,t){const o=[e,t];return L.add(o),()=>{L.delete(o)}},W(t,n){let s,c,i=0;switch(t){case 1:{const t=z;z=0;const o=n-w,s=r(o);t&&s<r(t)+1||0!==T||(x=o<0?2:1),m&&(R=e,m=!1),w=n,i=4;const l=O();l>=-v&&l<=W()&&(i+=1,c=s>v);break}case 2:i=8,0!==x&&(s=!0,i+=1),x=0,T=0,R=e;break;case 3:{const e=n.filter((([e,t])=>C.t[e]!==t));if(!e.length)break;D(e.reduce(((e,[t,o])=>((2===T||(R?t<R[0]:q(t)+(0===x&&0===T?B(t):0)<O()))&&(e+=o-B(t)),e)),0));for(const[t,o]of e){const e=B(t),r=_(C,t,o);l&&(M+=r?o:o-e)}l&&v&&M>v&&(D(((e,t)=>{let r=0;const n=e.t.filter(((e,o)=>{const n=e!==u;return n&&o<t&&r++,n})),s=e.o;return e.i=-1,((e.o=(e=>{const t=(e=>[...e].sort(((e,t)=>e-t)))(e),o=e.length/2|0;return t.length%2==0?(t[o-1]+t[o])/2:t[o]})(n))-s)*o(t-r,0)})(C,J[0])),l=!1),i=3,c=!0;break}case 4:v!==n&&(v=n,i=3);break;case 5:n[1]?(D(p(C,n[0],!0)),T=2,i=1):p(C,n[0]);break;case 6:b=n;break;case 7:T=1;break;case 8:R=P(n),i=1}i&&(g=[],s&&y&&(I+=y,y=0,k++),L.forEach((([e,t])=>{i&e&&t(c)})))}}},x=e=>{let t;return{q(o){(t||(t=new(b(v(o)).ResizeObserver)(e))).observe(o)},B(e){t.unobserve(e)},D(){t&&t.disconnect()}}},T=(e,t)=>t&&w()?-e:e,R=(t,o,r,n,c,i)=>{const l=Date.now;let u=0,a=!1,f=!1,_=!1,d=!1;const h=(()=>{let o;const r=()=>{o!=e&&clearTimeout(o)},n=()=>{r(),o=s((()=>{o=e,(()=>{if(a||f)return a=!1,void h();_=!1,t.W(2)})()}),150)};return n.U=r,n})(),p=()=>{u=l(),_&&(d=!0),i&&t.W(6,i()),t.W(1,n()),h()},m=e=>{if(a||0===t.R()||e.ctrlKey)return;const o=l()-u;150>o&&50<o&&(r?e.deltaX:e.deltaY)&&(a=!0)},g=()=>{f=!0,_=d=!1},v=()=>{f=!1,S()&&(_=!0)};return o.addEventListener("scroll",p),o.addEventListener("wheel",m,{passive:!0}),o.addEventListener("touchstart",g,{passive:!0}),o.addEventListener("touchend",v,{passive:!0}),{D:()=>{o.removeEventListener("scroll",p),o.removeEventListener("wheel",m),o.removeEventListener("touchstart",g),o.removeEventListener("touchend",v),h.U()},V:()=>{const[e,o]=t.O();e&&(c(T(e,r),o,d),d=!1,o&&t.J()>t.C()&&t.W(1,n()))}}},J=0,M=1,C=2,L=3,O=4,P=5,W=6,q=7,B=8,D=9,U=10,V=11,X=12,Y=13,F=14,H=15,j=16,A=17,E=18,G=19,K=(t,r,n,l,u,a)=>{const f=z(t,null!=r?r:40,void 0,0,!r),_=((t,o)=>{let r;const n=o?"width":"height",s=new WeakMap,c=x((o=>{const c=[];for(const{target:i,contentRect:l}of o)if(i.offsetParent)if(i===r)t.W(4,l[n]);else{const t=s.get(i);t!=e&&c.push([t,l[n]])}c.length&&t.W(3,c)}));return{X(e){c.q(r=e)},Y:(e,t)=>(s.set(e,t),c.q(e),()=>{s.delete(e),c.B(e)}),D:c.D}})(f,n),d=((e,t)=>{let o,r,n;const l=t?"scrollLeft":"scrollTop",u=t?"overflowX":"overflowY",a=async(r,c)=>{if(!o)return void i((()=>a(r,c)));n&&n();const u=()=>{let t;return[new Promise(((o,r)=>{t=o,n=r,(e=>!!e.J())(e)&&s(r,150)})),e.P(2,(()=>{t&&t()}))]};if(c&&k()){for(;e.W(8,r()),e.v();){const[e,t]=u();try{await e}catch(e){return}finally{t()}}o.scrollTo({[t?"left":"top"]:T(r(),t),behavior:"smooth"})}else for(;;){const[n,s]=u();try{o[l]=T(r(),t),e.W(7),await n}catch(e){return}finally{s()}}};return{q(c){o=c,r=R(e,c,t,(()=>T(c[l],t)),((t,o,r)=>{if(r){const e=c.style,t=e[u];e[u]="hidden",s((()=>{e[u]=t}))}o?(c[l]=e.T()+t,n&&n()):c[l]+=t}))},D(){r&&r.D()},F(e){a((()=>e))},H(t){t+=e.T(),a((()=>t))},j(t,{align:o,smooth:r,offset:n=0}={}){if(t=c(t,0,e.I()-1),"nearest"===o){const r=e.S(t),n=e.T();if(r<n)o="start";else{if(!(r+e.k(t)>n+e.J()))return;o="end"}}a((()=>n+e.M()+e.S(t)+("end"===o?e.k(t)-e.J():"center"===o?(e.k(t)-e.J())/2:0)),r)},V:()=>{r&&r.V()}}})(f,n),h=f.P(1,(()=>{l(f._())})),p=f.P(4,(()=>{u(f.T())})),m=f.P(8,(()=>{a()}));return{[J]:e=>{_.X(e),d.q(e)},[M]:()=>{h(),p(),m(),_.D(),d.D()},[C]:f.p,[L]:f.C,[O]:f.J,[P]:f.T,[W]:f.R,[q]:f.L,[B]:f.S,[D]:f.m,[U]:f.I,[V]:f.M,[X]:_.Y,[Y]:d.V,[F]:(e,t)=>{f.W(5,[e,t])},[H]:e=>{f.W(6,e)},[j]:()=>(e=>o(e.C(),e.J()))(f),[A]:d.F,[E]:d.H,[G]:d.j}},N=(t,o,r,n,s)=>{const c=z(t,null!=o?o:40,void 0,0,!o),i=((t,o)=>{const r=o?"width":"height",n=o?"innerWidth":"innerHeight",s=new WeakMap,c=x((o=>{const n=[];for(const{target:t,contentRect:c}of o){if(!t.offsetParent)continue;const o=s.get(t);o!=e&&n.push([o,c[r]])}n.length&&t.W(3,n)}));let i;return{X(e){const o=b(v(e)),r=()=>{t.W(4,o[n])};o.addEventListener("resize",r),r(),i=()=>{o.removeEventListener("resize",r)}},Y:(e,t)=>(s.set(e,t),c.q(e),()=>{s.delete(e),c.B(e)}),D(){i&&i(),c.D()}}})(c,r),l=((e,t)=>{let o;return{q(r){const n=t?"scrollX":"scrollY",s=v(r),c=b(s),i=s.body,l=(e,t,o,r=0)=>{const n=o?"offsetLeft":"offsetTop",s=r+(o&&w()?c.innerWidth-e[n]-e.offsetWidth:e[n]),i=e.offsetParent;return e!==t&&i?l(i,t,o,s):s};o=R(e,c,t,(()=>T(c[n],t)),((o,r)=>{r?c.scroll({[t?"left":"top"]:e.T()+o}):c.scrollBy(t?o:0,t?0:o)}),(()=>l(r,i,t)))},D(){o&&o.D()},V:()=>{o&&o.V()}}})(c,r),u=c.P(1,(()=>{n(c._())})),a=c.P(8,(()=>{s()}));return{[J]:e=>{i.X(e),l.q(e)},[M]:()=>{u(),a(),i.D(),l.D()},[C]:c.p,[L]:c.C,[O]:c.J,[P]:c.T,[W]:c.R,[q]:c.L,[B]:c.S,[D]:c.m,[U]:c.I,[X]:i.Y,[Y]:l.V,[F]:(e,t)=>{c.W(5,[e,t])}}};export{F as CHANGE_ITEM_LENGTH,H as CHANGE_START_MARGIN,Y as FIX_SCROLL_JUMP,U as GET_ITEMS_LENGTH,B as GET_ITEM_OFFSET,q as GET_JUMP_COUNT,C as GET_RANGE,W as GET_SCROLL_DIRECTION,P as GET_SCROLL_OFFSET,j as GET_SCROLL_SIZE,V as GET_START_SPACER_SIZE,L as GET_TOTAL_SIZE,O as GET_VIEWPORT_SIZE,D as IS_ITEM_HIDDEN,X as OBSERVE_ITEM_RESIZE,J as ON_MOUNT,M as ON_UN_MOUNT,E as SCROLL_BY,I as SCROLL_IDLE,A as SCROLL_TO,G as SCROLL_TO_INDEX,K as createVirtualizer,N as createWindowVirtualizer,y as getOverscanedRange,w as isRTLDocument};
+const e=null,{min:t,max:r,abs:o,floor:n}=Math,s=setTimeout,c=(e,o,n)=>t(n,r(o,e)),i="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},l=e=>{let t,r;return()=>(t||(t=!0,r=e()),r)},u=-1,a=(e,t,r)=>{const o=r?"unshift":"push";for(let r=0;r<t;r++)e[o](u);return e},f=(e,t)=>{const r=e.t[t];return r===u?e.o:r},_=(e,r,o)=>{const n=e.t[r]===u;return e.t[r]=o,e.i=t(r,e.i),n},d=(e,t)=>{if(!e.l)return 0;if(e.i>=t)return e.u[t];e.i<0&&(e.u[0]=0,e.i=0);let r=e.i,o=e.u[r];for(;r<t;)o+=f(e,r),e.u[++r]=o;return e.i=t,o},h=(e,t,r=0,o=e.l-1)=>{for(;r<=o;){const s=n((r+o)/2),c=d(e,s);if(c<=t){if(c+f(e,s)>t)return s;r=s+1}else o=s-1}return c(r,0,e.l-1)},p=(e,r,o)=>{const n=r-e.l;return e.i=o?-1:t(r-1,e.i),e.l=r,n>0?(a(e.u,n),a(e.t,n,o),e.o*n):(e.u.splice(n),(o?e.t.splice(0,-n):e.t.splice(n)).reduce(((t,r)=>t-(r===u?e.o:r)),0))},g="undefined"!=typeof window,m=()=>document.documentElement,v=e=>e.ownerDocument,b=e=>e.defaultView,w=/*#__PURE__*/l((()=>!!g&&"rtl"===getComputedStyle(m()).direction)),S=/*#__PURE__*/l((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),I=/*#__PURE__*/l((()=>"scrollBehavior"in m().style)),k=(n,s=40,c=4,i=0,l,g=!1)=>{let m=!!i,v=[],b=0,w=0,I=0,k=0,x=0,y=0,z=0,T=0,R=0,J=m?[0,r(i-1,0)]:e,M=[0,0],C=0;const L=((e,t)=>({o:t,t:a([],e),l:e,i:-1,u:a([],e)}))(n,s),O=new Set,P=()=>I-w,W=()=>P()+y+x,q=e=>((e,r,o,n)=>{if(n=t(n,e.l-1),d(e,n)<=r){const t=h(e,r+o,n);return[h(e,r,n,t),t]}{const t=h(e,r,void 0,n);return[t,h(e,r+o,t)]}})(L,e,b,M[0]),B=()=>(e=>e.l?d(e,e.l-1)+f(e,e.l-1):0)(L),U=e=>d(L,e)-y,V=e=>f(L,e),X=e=>{e&&(S()&&0!==T?y+=e:(x+=e,k++))};return{_:()=>v,h:()=>(e=>[e.t.slice(),e.o])(L),p:()=>{if(z)return M;let[e,o]=q(r(0,W()));return J&&(e=t(e,J[0]),o=r(o,J[1])),1!==T&&(e-=r(0,c)),2!==T&&(o+=r(0,c)),M=[r(e,0),t(o,L.l-1)]},m:()=>h(L,W()),v:()=>h(L,W()+b),S:e=>L.t[e]===u,I:()=>!!J&&L.t.slice(r(0,J[0]-1),t(L.l-1,J[1]+1)+1).includes(u),k:U,T:V,R:()=>L.l,J:()=>I,M:()=>0!==T,C:()=>b,L:()=>w,O:B,P:()=>k,W:()=>(z=x,x=0,[z,2===R||P()+b>=B()]),q:(e,t)=>{const r=[e,t];return O.add(r),()=>{O.delete(r)}},B:(t,n)=>{let s,c,i=0;switch(t){case 1:{const t=z;z=0;const r=n-I,s=o(r);t&&s<o(t)+1||0!==R||(T=r<0?2:1),m&&(J=e,m=!1),I=n,i=4;const l=P();l>=-b&&l<=B()&&(i+=1,c=s>b);break}case 2:i=8,0!==T&&(s=!0,i+=1),T=0,R=0,J=e;break;case 3:{const e=n.filter((([e,t])=>L.t[e]!==t));if(!e.length)break;X(e.reduce(((e,[t,r])=>((2===R||(J?t<J[0]:U(t)+(0===T&&0===R?V(t):0)<P()))&&(e+=r-V(t)),e)),0));for(const[t,r]of e){const e=V(t),o=_(L,t,r);g&&(C+=o?r:r-e)}g&&b&&C>b&&(X(((e,t)=>{let o=0;const n=e.t.filter(((e,r)=>{const n=e!==u;return n&&r<t&&o++,n})),s=e.o;return e.i=-1,((e.o=(e=>{const t=(e=>[...e].sort(((e,t)=>e-t)))(e),r=e.length/2|0;return t.length%2==0?(t[r-1]+t[r])/2:t[r]})(n))-s)*r(t-o,0)})(L,h(L,W()))),g=!1),i=3,c=!0;break}case 4:b!==n&&(b=n,i=3);break;case 5:n[1]?(X(p(L,n[0],!0)),R=2,i=1):p(L,n[0]);break;case 6:w=n;break;case 7:R=1;break;case 8:J=q(n),i=1}i&&(v=[],s&&y&&(x+=y,y=0,k++),O.forEach((([e,t])=>{i&e&&t(c)})))}}},x=e=>{let t;return{U(r){(t||(t=new(b(v(r)).ResizeObserver)(e))).observe(r)},V(e){t.unobserve(e)},X(){t&&t.disconnect()}}},y=(e,t)=>t&&w()?-e:e,z=(t,r,o,n,c,i)=>{const l=Date.now;let u=0,a=!1,f=!1,_=!1,d=!1;const h=(()=>{let r;const o=()=>{r!=e&&clearTimeout(r)},n=()=>{o(),r=s((()=>{r=e,(()=>{if(a||f)return a=!1,void h();_=!1,t.B(2)})()}),150)};return n.Y=o,n})(),p=()=>{u=l(),_&&(d=!0),i&&t.B(6,i()),t.B(1,n()),h()},g=e=>{if(a||!t.M()||e.ctrlKey)return;const r=l()-u;150>r&&50<r&&(o?e.deltaX:e.deltaY)&&(a=!0)},m=()=>{f=!0,_=d=!1},v=()=>{f=!1,S()&&(_=!0)};return r.addEventListener("scroll",p),r.addEventListener("wheel",g,{passive:!0}),r.addEventListener("touchstart",m,{passive:!0}),r.addEventListener("touchend",v,{passive:!0}),{X:()=>{r.removeEventListener("scroll",p),r.removeEventListener("wheel",g),r.removeEventListener("touchstart",m),r.removeEventListener("touchend",v),h.Y()},D:()=>{const[e,r]=t.W();e&&(c(y(e,o),r,d),d=!1,r&&t.C()>t.O()&&t.B(1,n()))}}},T=0,R=1,J=2,M=3,C=4,L=5,O=6,P=7,W=8,q=9,B=10,U=11,V=12,X=13,Y=14,D=15,E=16,F=17,H=18,j=19,A=20,G=21,K=22,N=(t,o,n,l,u,a,f)=>{const _=k(t,o,n,void 0,0,!o),d=((t,r)=>{let o;const n=r?"width":"height",s=new WeakMap,c=x((r=>{const c=[];for(const{target:i,contentRect:l}of r)if(i.offsetParent)if(i===o)t.B(4,l[n]);else{const t=s.get(i);t!=e&&c.push([t,l[n]])}c.length&&t.B(3,c)}));return{F(e){c.U(o=e)},H:(e,t)=>(s.set(e,t),c.U(e),()=>{s.delete(e),c.V(e)}),X:c.X}})(_,l),h=((e,t)=>{let r,o,n;const l=t?"scrollLeft":"scrollTop",u=t?"overflowX":"overflowY",a=async(o,c)=>{if(!r)return void i((()=>a(o,c)));n&&n();const u=()=>{let t;return[new Promise(((r,o)=>{t=r,n=o,(e=>!!e.C())(e)&&s(o,150)})),e.q(2,(()=>{t&&t()}))]};if(c&&I()){for(;e.B(8,o()),e.I();){const[e,t]=u();try{await e}catch(e){return}finally{t()}}r.scrollTo({[t?"left":"top"]:y(o(),t),behavior:"smooth"})}else for(;;){const[n,s]=u();try{r[l]=y(o(),t),e.B(7),await n}catch(e){return}finally{s()}}};return{U(c){r=c,o=z(e,c,t,(()=>y(c[l],t)),((t,r,o)=>{if(o){const e=c.style,t=e[u];e[u]="hidden",s((()=>{e[u]=t}))}r?(c[l]=e.J()+t,n&&n()):c[l]+=t}))},X(){o&&o.X()},j(e){a((()=>e))},A(t){t+=e.J(),a((()=>t))},G(t,{align:r,smooth:o,offset:n=0}={}){if(t=c(t,0,e.R()-1),"nearest"===r){const o=e.k(t),n=e.J();if(o<n)r="start";else{if(!(o+e.T(t)>n+e.C()))return;r="end"}}a((()=>n+e.L()+e.k(t)+("end"===r?e.T(t)-e.C():"center"===r?(e.T(t)-e.C())/2:0)),o)},D:()=>{o&&o.D()}}})(_,l),p=_.q(1,(()=>{u(_._())})),g=_.q(4,(()=>{a(_.J())})),m=_.q(8,(()=>{f()}));return{[T]:e=>{d.F(e),h.U(e)},[R]:()=>{p(),g(),m(),d.X(),h.X()},[J]:_.p,[M]:_.O,[C]:_.C,[L]:_.J,[O]:_.M,[P]:_.P,[W]:_.k,[q]:_.T,[B]:_.S,[U]:_.R,[V]:_.L,[X]:d.H,[Y]:h.D,[D]:(e,t)=>{_.B(5,[e,t])},[E]:e=>{_.B(6,e)},[F]:()=>(e=>r(e.O(),e.C()))(_),[H]:h.j,[j]:h.A,[A]:h.G,[G]:_.m,[K]:_.v}},Q=(t,r,o,n,s,c,i)=>{const l=k(t,r,o,void 0,0,!r),u=((t,r)=>{const o=r?"width":"height",n=r?"innerWidth":"innerHeight",s=new WeakMap,c=x((r=>{const n=[];for(const{target:t,contentRect:c}of r){if(!t.offsetParent)continue;const r=s.get(t);r!=e&&n.push([r,c[o]])}n.length&&t.B(3,n)}));let i;return{F(e){const r=b(v(e)),o=()=>{t.B(4,r[n])};r.addEventListener("resize",o),o(),i=()=>{r.removeEventListener("resize",o)}},H:(e,t)=>(s.set(e,t),c.U(e),()=>{s.delete(e),c.V(e)}),X(){i&&i(),c.X()}}})(l,n),a=((e,t)=>{let r;return{U(o){const n=t?"scrollX":"scrollY",s=v(o),c=b(s),i=s.body,l=(e,t,r,o=0)=>{const n=r?"offsetLeft":"offsetTop",s=o+(r&&w()?c.innerWidth-e[n]-e.offsetWidth:e[n]),i=e.offsetParent;return e!==t&&i?l(i,t,r,s):s};r=z(e,c,t,(()=>y(c[n],t)),((r,o)=>{o?c.scroll({[t?"left":"top"]:e.J()+r}):c.scrollBy(t?r:0,t?0:r)}),(()=>l(o,i,t)))},X(){r&&r.X()},D:()=>{r&&r.D()}}})(l,n),f=l.q(1,(()=>{s(l._())})),_=l.q(4,(()=>{c(l.J())})),d=l.q(8,(()=>{i()}));return{[T]:e=>{u.F(e),a.U(e)},[R]:()=>{f(),_(),d(),u.X(),a.X()},[J]:l.p,[M]:l.O,[C]:l.C,[L]:l.J,[O]:l.M,[P]:l.P,[W]:l.k,[B]:l.S,[U]:l.R,[X]:u.H,[Y]:a.D,[D]:(e,t)=>{l.B(5,[e,t])},[G]:l.m,[K]:l.v}};export{D as CHANGE_ITEM_LENGTH,E as CHANGE_START_MARGIN,Y as FIX_SCROLL_JUMP,K as GET_END_INDEX,O as GET_IS_SCROLLING,U as GET_ITEMS_LENGTH,W as GET_ITEM_OFFSET,q as GET_ITEM_SIZE,P as GET_JUMP_COUNT,J as GET_RANGE,L as GET_SCROLL_OFFSET,F as GET_SCROLL_SIZE,G as GET_START_INDEX,V as GET_START_SPACER_SIZE,M as GET_TOTAL_SIZE,C as GET_VIEWPORT_SIZE,B as IS_ITEM_HIDDEN,X as OBSERVE_ITEM_RESIZE,T as ON_MOUNT,R as ON_UN_MOUNT,j as SCROLL_BY,H as SCROLL_TO,A as SCROLL_TO_INDEX,N as createVirtualizer,Q as createWindowVirtualizer,w as isRTLDocument};

package/lib/vue/VList.d.ts

@@ -15,10 +15,7 @@ export declare const VList: import("vue").DefineComponent<{
      * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 4
      */
-    overscan: {
-        type: NumberConstructor;
-        default: number;
-    };
+    overscan: NumberConstructor;
     /**
      * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
      *
@@ -48,12 +45,6 @@ export declare const VList: import("vue").DefineComponent<{
      * Callback invoked when scrolling stops.
      */
     scrollEnd: () => void;
-    /**
-     * Callback invoked when visible items range changes.
-     * @param startIndex The start index of viewable items.
-     * @param endIndex The end index of viewable items.
-     */
-    rangeChange: (startIndex: number, endIndex: number) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The data items rendered by this component.
@@ -66,10 +57,7 @@ export declare const VList: import("vue").DefineComponent<{
      * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 4
      */
-    overscan: {
-        type: NumberConstructor;
-        default: number;
-    };
+    overscan: NumberConstructor;
     /**
      * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
      *
@@ -92,10 +80,8 @@ export declare const VList: import("vue").DefineComponent<{
 }>> & {
     onScroll?: ((offset: number) => any) | undefined;
     onScrollEnd?: (() => any) | undefined;
-    onRangeChange?: ((startIndex: number, endIndex: number) => any) | undefined;
 }, {
     shift: boolean;
-    overscan: number;
     horizontal: boolean;
 }, SlotsType<{
     default: (arg: {

package/lib/vue/Virtualizer.d.ts

@@ -14,11 +14,24 @@ export interface VirtualizerHandle {
      * Get current offsetHeight, or offsetWidth if horizontal: true.
      */
     readonly viewportSize: number;
+    /**
+     * Get the start index of visible range of items.
+     */
+    readonly startIndex: number;
+    /**
+     * Get the end index of visible range of items.
+     */
+    readonly endIndex: number;
     /**
      * Get item offset from start.
      * @param index index of item
      */
     getItemOffset(index: number): number;
+    /**
+     * Get item size.
+     * @param index index of item
+     */
+    getItemSize(index: number): number;
     /**
      * Scroll to the item specified by index.
      * @param index index of item
@@ -48,10 +61,7 @@ export declare const Virtualizer: import("vue").DefineComponent<{
      * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 4
      */
-    overscan: {
-        type: NumberConstructor;
-        default: number;
-    };
+    overscan: NumberConstructor;
     /**
      * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
      *
@@ -108,12 +118,6 @@ export declare const Virtualizer: import("vue").DefineComponent<{
      * Callback invoked when scrolling stops.
      */
     scrollEnd: () => void;
-    /**
-     * Callback invoked when visible items range changes.
-     * @param startIndex The start index of viewable items.
-     * @param endIndex The end index of viewable items.
-     */
-    rangeChange: (startIndex: number, endIndex: number) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * The data items rendered by this component.
@@ -126,10 +130,7 @@ export declare const Virtualizer: import("vue").DefineComponent<{
      * Number of items to render above/below the visible bounds of the list. You can increase to avoid showing blank items in fast scrolling.
      * @defaultValue 4
      */
-    overscan: {
-        type: NumberConstructor;
-        default: number;
-    };
+    overscan: NumberConstructor;
     /**
      * Item size hint for unmeasured items. It will help to reduce scroll jump when items are measured if used properly.
      *
@@ -179,10 +180,8 @@ export declare const Virtualizer: import("vue").DefineComponent<{
 }>> & {
     onScroll?: ((offset: number) => any) | undefined;
     onScrollEnd?: (() => any) | undefined;
-    onRangeChange?: ((startIndex: number, endIndex: number) => any) | undefined;
 }, {
     shift: boolean;
-    overscan: number;
     horizontal: boolean;
     startMargin: number;
     as: keyof import("vue").IntrinsicElementAttributes;