@pdanpdan/virtual-scroll 0.10.1 → 0.10.3

package/dist/virtual-scroll.css

@@ -1,2 +1,2 @@
-@layer components{.virtual-scrollbar-track{--vsi-scrollbar-bg:var(--vs-scrollbar-bg,light-dark(#e6e6e6e6,#1e1e1ee6));--vsi-scrollbar-thumb-bg:var(--vs-scrollbar-thumb-bg,light-dark(#0000004d,#ffffff4d));--vsi-scrollbar-thumb-hover-bg:var(--vs-scrollbar-thumb-hover-bg,light-dark(#0009,#fff9));--vsi-scrollbar-radius:var(--vs-scrollbar-radius,4px);--vsi-scrollbar-size:var(--vs-scrollbar-size,8px);contain:layout;background-color:var(--vsi-scrollbar-bg);border-radius:var(--vsi-scrollbar-radius);z-index:30;-webkit-user-select:none;user-select:none;pointer-events:auto;transition:opacity .2s;position:absolute}.virtual-scrollbar-track.virtual-scrollbar-track--vertical{inline-size:var(--vsi-scrollbar-size);inset-block-start:2px;inset-inline-end:2px}.virtual-scrollbar-track.virtual-scrollbar-track--horizontal{block-size:var(--vsi-scrollbar-size);inset-block-end:2px;inset-inline-start:2px}.virtual-scrollbar-thumb{background-color:var(--vsi-scrollbar-thumb-bg);border-radius:var(--vsi-scrollbar-radius);touch-action:none;pointer-events:auto;cursor:pointer;position:absolute}.virtual-scrollbar-thumb:hover,.virtual-scrollbar-thumb:active,.virtual-scrollbar-thumb.virtual-scrollbar-thumb--active{background-color:var(--vsi-scrollbar-thumb-hover-bg)}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--vertical{inline-size:100%}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--horizontal{block-size:100%}.virtual-scroll-container[data-v-a75851a5]{outline-offset:1px;block-size:100%;inline-size:100%;position:relative}.virtual-scroll-container[data-v-a75851a5]:not(.virtual-scroll--window){overscroll-behavior:contain;overflow:auto}.virtual-scroll-container.virtual-scroll--table[data-v-a75851a5]{display:block}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-a75851a5]{scrollbar-width:none;-ms-overflow-style:none}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-a75851a5]::-webkit-scrollbar{display:none}.virtual-scroll-container.virtual-scroll--horizontal[data-v-a75851a5],.virtual-scroll-container.virtual-scroll--both[data-v-a75851a5]{white-space:nowrap}.virtual-scroll-scrollbar-container[data-v-a75851a5]{z-index:30;pointer-events:none;block-size:0;inline-size:100%;position:sticky;inset-block-start:0;inset-inline-start:0;overflow:visible}.virtual-scroll-scrollbar-viewport[data-v-a75851a5]{pointer-events:none;position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-wrapper[data-v-a75851a5]{contain:layout;position:relative}:where(.virtual-scroll--hydrated>.virtual-scroll-wrapper>.virtual-scroll-item[data-v-a75851a5]){position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-item[data-v-a75851a5]{box-sizing:border-box;will-change:transform;display:grid}.virtual-scroll-item[data-v-a75851a5]:where(.virtual-scroll--debug){background-color:#ff00000d;outline:1px dashed #ff000080}.virtual-scroll-item[data-v-a75851a5]:where(.virtual-scroll--debug):where(:hover){z-index:100;background-color:#ff00001a}.virtual-scroll-debug-info[data-v-a75851a5]{color:#fff;pointer-events:none;z-index:100;background:#000000b3;border-radius:4px;padding:2px 4px;font-family:monospace;font-size:10px;position:absolute;inset-block-start:2px;inset-inline-end:2px}.virtual-scroll-spacer[data-v-a75851a5]{pointer-events:none}.virtual-scroll-header[data-v-a75851a5],.virtual-scroll-footer[data-v-a75851a5]{z-index:20;position:relative}.virtual-scroll--sticky[data-v-a75851a5]{position:sticky}.virtual-scroll--sticky[data-v-a75851a5]:where(.virtual-scroll-header){box-sizing:border-box;min-inline-size:100%;inset-block-start:0;inset-inline-start:0}.virtual-scroll--sticky[data-v-a75851a5]:where(.virtual-scroll-footer){box-sizing:border-box;min-inline-size:100%;inset-block-end:0;inset-inline-start:0}.virtual-scroll--sticky[data-v-a75851a5]:where(.virtual-scroll-item){z-index:10}:is(tbody.virtual-scroll-wrapper[data-v-a75851a5],thead.virtual-scroll-header[data-v-a75851a5],tfoot.virtual-scroll-footer[data-v-a75851a5]),:is(tbody.virtual-scroll-wrapper[data-v-a75851a5],thead.virtual-scroll-header[data-v-a75851a5],tfoot.virtual-scroll-footer[data-v-a75851a5])>tr{min-inline-size:100%;display:inline-flex}:is(tbody.virtual-scroll-wrapper[data-v-a75851a5],thead.virtual-scroll-header[data-v-a75851a5],tfoot.virtual-scroll-footer[data-v-a75851a5])>tr>:is(td,th){align-items:center;display:inline-block}}
+@layer components{.virtual-scrollbar-track{--vsi-scrollbar-bg:var(--vs-scrollbar-bg,light-dark(#e6e6e6e6,#1e1e1ee6));--vsi-scrollbar-thumb-bg:var(--vs-scrollbar-thumb-bg,light-dark(#0000004d,#ffffff4d));--vsi-scrollbar-thumb-hover-bg:var(--vs-scrollbar-thumb-hover-bg,light-dark(#0009,#fff9));--vsi-scrollbar-radius:var(--vs-scrollbar-radius,4px);--vsi-scrollbar-size:var(--vs-scrollbar-size,8px);contain:layout;background-color:var(--vsi-scrollbar-bg);border-radius:var(--vsi-scrollbar-radius);z-index:30;-webkit-user-select:none;user-select:none;pointer-events:auto;transition:opacity .2s;position:absolute}.virtual-scrollbar-track.virtual-scrollbar-track--vertical{inline-size:var(--vsi-scrollbar-size);inset-block-start:2px;inset-inline-end:2px}.virtual-scrollbar-track.virtual-scrollbar-track--horizontal{block-size:var(--vsi-scrollbar-size);inset-block-end:2px;inset-inline-start:2px}.virtual-scrollbar-thumb{background-color:var(--vsi-scrollbar-thumb-bg);border-radius:var(--vsi-scrollbar-radius);touch-action:none;pointer-events:auto;cursor:pointer;position:absolute}.virtual-scrollbar-thumb:hover,.virtual-scrollbar-thumb:active,.virtual-scrollbar-thumb.virtual-scrollbar-thumb--active{background-color:var(--vsi-scrollbar-thumb-hover-bg)}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--vertical{inline-size:100%}.virtual-scrollbar-thumb.virtual-scrollbar-thumb--horizontal{block-size:100%}.virtual-scroll-container[data-v-200891f5]{outline-offset:1px;block-size:100%;inline-size:100%;position:relative}.virtual-scroll-container[data-v-200891f5]:not(.virtual-scroll--window){overscroll-behavior:contain;overflow:auto}.virtual-scroll-container.virtual-scroll--table[data-v-200891f5]{display:block}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-200891f5]{scrollbar-width:none;-ms-overflow-style:none}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-200891f5]::-webkit-scrollbar{display:none}.virtual-scroll-container.virtual-scroll--horizontal[data-v-200891f5],.virtual-scroll-container.virtual-scroll--both[data-v-200891f5]{white-space:nowrap}.virtual-scroll-scrollbar-container[data-v-200891f5]{z-index:30;pointer-events:none;block-size:0;inline-size:100%;position:sticky;inset-block-start:0;inset-inline-start:0;overflow:visible}.virtual-scroll-scrollbar-viewport[data-v-200891f5]{pointer-events:none;position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-wrapper[data-v-200891f5]{contain:layout;position:relative}:where(.virtual-scroll--hydrated>.virtual-scroll-wrapper>.virtual-scroll-item[data-v-200891f5]){position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-item[data-v-200891f5]{box-sizing:border-box;will-change:transform;display:grid}.virtual-scroll-item[data-v-200891f5]:where(.virtual-scroll--debug){background-color:#ff00000d;outline:1px dashed #ff000080}.virtual-scroll-item[data-v-200891f5]:where(.virtual-scroll--debug):where(:hover){z-index:100;background-color:#ff00001a}.virtual-scroll-debug-info[data-v-200891f5]{color:#fff;pointer-events:none;z-index:100;background:#000000b3;border-radius:4px;padding:2px 4px;font-family:monospace;font-size:10px;position:absolute;inset-block-start:2px;inset-inline-end:2px}.virtual-scroll-spacer[data-v-200891f5]{pointer-events:none}.virtual-scroll-header[data-v-200891f5],.virtual-scroll-footer[data-v-200891f5]{z-index:20;position:relative}.virtual-scroll--sticky[data-v-200891f5]{position:sticky}.virtual-scroll--sticky[data-v-200891f5]:where(.virtual-scroll-header){box-sizing:border-box;min-inline-size:100%;inset-block-start:0;inset-inline-start:0}.virtual-scroll--sticky[data-v-200891f5]:where(.virtual-scroll-footer){box-sizing:border-box;min-inline-size:100%;inset-block-end:0;inset-inline-start:0}.virtual-scroll--sticky[data-v-200891f5]:where(.virtual-scroll-item){z-index:10}:is(tbody.virtual-scroll-wrapper[data-v-200891f5],thead.virtual-scroll-header[data-v-200891f5],tfoot.virtual-scroll-footer[data-v-200891f5]),:is(tbody.virtual-scroll-wrapper[data-v-200891f5],thead.virtual-scroll-header[data-v-200891f5],tfoot.virtual-scroll-footer[data-v-200891f5])>tr{min-inline-size:100%;display:inline-flex}:is(tbody.virtual-scroll-wrapper[data-v-200891f5],thead.virtual-scroll-header[data-v-200891f5],tfoot.virtual-scroll-footer[data-v-200891f5])>tr>:is(td,th){align-items:center;display:inline-block}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdanpdan/virtual-scroll",
   "type": "module",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "A high-performance virtual scroll component for Vue 3",
   "author": "",
   "license": "MIT",

package/src/components/VirtualScroll.vue

@@ -1100,7 +1100,7 @@ const internalItemRole = computed(() => {
   }
   return 'listitem';
 });
-const itemRole = computed(() => props.itemRole != null ? props.itemRole : internalItemRole.value);
+const itemRole = computed(() => props.itemRole ?? internalItemRole.value);
 const cellRole = computed(() => {
   if (props.role === 'grid' || (!props.role && props.direction === 'both')) {
     return 'gridcell';

package/src/composables/useVirtualScroll.ts

@@ -417,16 +417,19 @@ export function useVirtualScroll<T = unknown>(
     const scrollBehavior = isCorrection ? 'auto' : (behavior || 'smooth');
 
     if (!dryRun) {
-      if (scrollBehavior === 'smooth' || !isCorrection) {
-        isProgrammaticScroll.value = true;
-        clearTimeout(programmaticScrollTimer);
-        if (scrollBehavior === 'smooth') {
-          programmaticScrollTimer = setTimeout(() => {
-            isProgrammaticScroll.value = false;
-            programmaticScrollTimer = undefined;
-            checkPendingScroll();
-          }, 1000);
-        }
+      isProgrammaticScroll.value = true;
+      clearTimeout(programmaticScrollTimer);
+      if (scrollBehavior === 'smooth') {
+        programmaticScrollTimer = setTimeout(() => {
+          isProgrammaticScroll.value = false;
+          programmaticScrollTimer = undefined;
+          checkPendingScroll();
+        }, 1000);
+      } else {
+        programmaticScrollTimer = setTimeout(() => {
+          isProgrammaticScroll.value = false;
+          programmaticScrollTimer = undefined;
+        }, 150);
       }
     }
 
@@ -438,7 +441,7 @@ export function useVirtualScroll<T = unknown>(
       scrollOptions.top = Math.max(0, finalY);
     }
 
-    if (!isCorrection && !dryRun) {
+    if (!dryRun) {
       scrollTo(container, scrollOptions);
     }
 
@@ -466,6 +469,11 @@ export function useVirtualScroll<T = unknown>(
         programmaticScrollTimer = undefined;
         checkPendingScroll();
       }, 1000);
+    } else {
+      programmaticScrollTimer = setTimeout(() => {
+        isProgrammaticScroll.value = false;
+        programmaticScrollTimer = undefined;
+      }, 150);
     }
     pendingScroll.value = null;
 
@@ -620,7 +628,7 @@ export function useVirtualScroll<T = unknown>(
     treeUpdateFlag.value;
     const { start, end } = range.value;
     const items: RenderedItem<T>[] = [];
-    const stickyIndices = [ ...(props.value.stickyIndices || []) ].sort((a, b) => a - b);
+    const stickyIndices = (props.value.stickyIndices || []).toSorted((a, b) => a - b);
     const stickySet = new Set(stickyIndices);
     const sortedIndices: number[] = [];
     if (isHydrated.value || !props.value.ssrRange) {
@@ -830,11 +838,47 @@ export function useVirtualScroll<T = unknown>(
       const scrollValueY = actualScrollY;
       const currentRelX = displayToVirtual(scrollValueX, 0, scaleX.value);
       const currentRelY = displayToVirtual(scrollValueY, 0, scaleY.value);
-      const { targetX, targetY } = calculateScrollTarget({ rowIndex, colIndex, options, direction: direction.value, viewportWidth: viewportWidth.value, viewportHeight: viewportHeight.value, totalWidth: virtualWidth.value, totalHeight: virtualHeight.value, gap: props.value.gap || 0, columnGap: props.value.columnGap || 0, fixedSize: fixedItemSize.value, fixedWidth: fixedColumnWidth.value, relativeScrollX: currentRelX, relativeScrollY: currentRelY, getItemSizeY: (idx) => itemSizesY.get(idx), getItemSizeX: (idx) => itemSizesX.get(idx), getItemQueryY: (idx) => itemSizesY.query(idx), getItemQueryX: (idx) => itemSizesX.query(idx), getColumnSize: (idx) => columnSizes.get(idx), getColumnQuery: (idx) => columnSizes.query(idx), scaleX: scaleX.value, scaleY: scaleY.value, hostOffsetX: componentOffset.x, hostOffsetY: componentOffset.y, stickyIndices: (props.value.stickyIndices || []), stickyStartX: stickyStartX.value, stickyStartY: stickyStartY.value, stickyEndX: stickyEndX.value, stickyEndY: stickyEndY.value, flowPaddingStartX: flowStartX.value, flowPaddingStartY: flowStartY.value, paddingStartX: paddingStartX.value, paddingStartY: paddingStartY.value, paddingEndX: paddingEndX.value, paddingEndY: paddingEndY.value });
+      const { targetX, targetY } = calculateScrollTarget({
+        rowIndex,
+        colIndex,
+        options,
+        direction: direction.value,
+        viewportWidth: viewportWidth.value,
+        viewportHeight: viewportHeight.value,
+        totalWidth: totalWidth.value,
+        totalHeight: totalHeight.value,
+        gap: props.value.gap || 0,
+        columnGap: props.value.columnGap || 0,
+        fixedSize: fixedItemSize.value,
+        fixedWidth: fixedColumnWidth.value,
+        relativeScrollX: currentRelX,
+        relativeScrollY: currentRelY,
+        getItemSizeY: (idx) => itemSizesY.get(idx),
+        getItemSizeX: (idx) => itemSizesX.get(idx),
+        getItemQueryY: (idx) => itemSizesY.query(idx),
+        getItemQueryX: (idx) => itemSizesX.query(idx),
+        getColumnSize: (idx) => columnSizes.get(idx),
+        getColumnQuery: (idx) => columnSizes.query(idx),
+        scaleX: scaleX.value,
+        scaleY: scaleY.value,
+        hostOffsetX: componentOffset.x,
+        hostOffsetY: componentOffset.y,
+        stickyIndices: props.value.stickyIndices || [],
+        stickyStartX: stickyStartX.value,
+        stickyStartY: stickyStartY.value,
+        stickyEndX: stickyEndX.value,
+        stickyEndY: stickyEndY.value,
+        flowPaddingStartX: flowStartX.value,
+        flowPaddingStartY: flowStartY.value,
+        paddingStartX: paddingStartX.value,
+        paddingStartY: paddingStartY.value,
+        paddingEndX: paddingEndX.value,
+        paddingEndY: paddingEndY.value,
+      });
       const toleranceX = 2 * scaleX.value;
       const toleranceY = 2 * scaleY.value;
-      const reachedX = (colIndex === null || colIndex === undefined) || Math.abs(currentRelX - targetX) < toleranceX;
-      const reachedY = (rowIndex === null || rowIndex === undefined) || Math.abs(currentRelY - targetY) < toleranceY;
+      const reachedX = (colIndex === null || colIndex === undefined) || (viewportWidth.value > 0 && Math.abs(currentRelX - targetX) < toleranceX);
+      const reachedY = (rowIndex === null || rowIndex === undefined) || (viewportHeight.value > 0 && Math.abs(currentRelY - targetY) < toleranceY);
       if (reachedX && reachedY) {
         const isMeasuredX = colIndex == null || colIndex === undefined || measuredColumns.value[ colIndex ] === 1;
         const isMeasuredY = rowIndex == null || rowIndex === undefined || measuredItemsY.value[ rowIndex ] === 1;
@@ -848,7 +892,7 @@ export function useVirtualScroll<T = unknown>(
     }
   }
 
-  watch([ treeUpdateFlag, viewportWidth, viewportHeight ], checkPendingScroll);
+  watch([ treeUpdateFlag, viewportWidth, viewportHeight, isHydrating ], checkPendingScroll);
   watch(isScrolling, (scrolling) => {
     if (!scrolling) {
       checkPendingScroll();

package/src/composables/useVirtualScrollSizes.ts

@@ -388,7 +388,7 @@ export function useVirtualScrollSizes<T>(
           tryUpdateColumn(Number.parseInt(colIndexAttr, 10), inlineSize);
         } else {
           // If the element is a row, try to find cells with data-col-index
-          const cells = Array.from(element.querySelectorAll('[data-col-index]')) as HTMLElement[];
+          const cells = [ ...element.querySelectorAll('[data-col-index]') ] as HTMLElement[];
 
           for (const child of cells) {
             const colIndex = Number.parseInt(child.dataset.colIndex!, 10);

package/src/extensions/sticky.ts

@@ -11,7 +11,7 @@ import { findPrevStickyIndex } from '../utils/virtual-scroll-logic';
  */
 export function useStickyExtension<T = unknown>(): VirtualScrollExtension<T> {
   const sortedStickyIndices = (ctx: ExtensionContext<T>) =>
-    computed(() => [ ...(ctx.props.value.stickyIndices || []) ].sort((a, b) => a - b));
+    computed(() => (ctx.props.value.stickyIndices || []).toSorted((a, b) => a - b));
 
   return {
     name: 'sticky',