@pdanpdan/virtual-scroll 0.2.0 → 0.3.0

package/src/components/VirtualScroll.vue

@@ -6,10 +6,14 @@ import type {
   ScrollDetails,
   VirtualScrollProps,
 } from '../composables/useVirtualScroll';
+import type { VNodeChild } from 'vue';
 
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { useVirtualScroll } from '../composables/useVirtualScroll';
+import {
+  DEFAULT_ITEM_SIZE,
+  useVirtualScroll,
+} from '../composables/useVirtualScroll';
 import { getPaddingX, getPaddingY } from '../utils/scroll';
 
 export interface Props<T = unknown> {
@@ -89,7 +93,7 @@ const props = withDefaults(defineProps<Props<T>>(), {
   gap: 0,
   columnGap: 0,
   stickyIndices: () => [],
-  loadDistance: 50,
+  loadDistance: 200,
   loading: false,
   restoreScrollOnPrepend: false,
   debug: false,
@@ -101,7 +105,29 @@ const emit = defineEmits<{
   (e: 'visibleRangeChange', range: { start: number; end: number; colStart: number; colEnd: number; }): void;
 }>();
 
-const isDebug = computed(() => props.debug);
+const slots = defineSlots<{
+  /** Content rendered at the top of the scrollable area. Can be made sticky. */
+  header?: (props: Record<string, never>) => VNodeChild;
+  /** Slot for rendering each individual item. */
+  item?: (props: {
+    /** The data item being rendered. */
+    item: T;
+    /** The index of the item in the items array. */
+    index: number;
+    /** The current visible range of columns (for grid mode). */
+    columnRange: { start: number; end: number; padStart: number; padEnd: number; };
+    /** Function to get the width of a specific column. */
+    getColumnWidth: (index: number) => number;
+    /** Whether this item is configured to be sticky. */
+    isSticky?: boolean | undefined;
+    /** Whether this item is currently in a sticky state. */
+    isStickyActive?: boolean | undefined;
+  }) => VNodeChild;
+  /** Content shown when `loading` prop is true. */
+  loading?: (props: Record<string, never>) => VNodeChild;
+  /** Content rendered at the bottom of the scrollable area. Can be made sticky. */
+  footer?: (props: Record<string, never>) => VNodeChild;
+}>();
 
 const hostRef = ref<HTMLElement | null>(null);
 const wrapperRef = ref<HTMLElement | null>(null);
@@ -125,6 +151,7 @@ const virtualScrollProps = computed(() => {
   const pStart = props.scrollPaddingStart;
   const pEnd = props.scrollPaddingEnd;
 
+  /* v8 ignore start -- @preserve */
   const startX = typeof pStart === 'object'
     ? (pStart.x || 0)
     : (props.direction === 'horizontal' ? (pStart || 0) : 0);
@@ -138,6 +165,7 @@ const virtualScrollProps = computed(() => {
   const endY = typeof pEnd === 'object'
     ? (pEnd.y || 0)
     : (props.direction !== 'horizontal' ? (pEnd || 0) : 0);
+  /* v8 ignore stop -- @preserve */
 
   return {
     items: props.items,
@@ -170,7 +198,7 @@ const virtualScrollProps = computed(() => {
     initialScrollAlign: props.initialScrollAlign,
     defaultItemSize: props.defaultItemSize,
     defaultColumnWidth: props.defaultColumnWidth,
-    debug: isDebug.value,
+    debug: props.debug,
   } as VirtualScrollProps<T>;
 });
 
@@ -186,10 +214,37 @@ const {
   scrollToOffset,
   updateHostOffset,
   updateItemSizes,
-  refresh,
+  refresh: coreRefresh,
   stopProgrammaticScroll,
 } = useVirtualScroll(virtualScrollProps);
 
+/**
+ * Resets all dynamic measurements and re-initializes from props.
+ * Also triggers manual re-measurement of all currently rendered items.
+ */
+function refresh() {
+  coreRefresh();
+  nextTick(() => {
+    const updates: { index: number; inlineSize: number; blockSize: number; element?: HTMLElement; }[] = [];
+
+    for (const [ index, el ] of itemRefs.entries()) {
+      /* v8 ignore else -- @preserve */
+      if (el) {
+        updates.push({
+          index,
+          inlineSize: el.offsetWidth,
+          blockSize: el.offsetHeight,
+          element: el,
+        });
+      }
+    }
+
+    if (updates.length > 0) {
+      updateItemSizes(updates);
+    }
+  });
+}
+
 // Watch for scroll details and emit event
 watch(scrollDetails, (details, oldDetails) => {
   if (!isHydrated.value) {
@@ -233,6 +288,7 @@ watch(scrollDetails, (details, oldDetails) => {
 });
 
 watch(isHydrated, (hydrated) => {
+  /* v8 ignore else -- @preserve */
   if (hydrated) {
     emit('visibleRangeChange', {
       start: scrollDetails.value.range.start,
@@ -243,10 +299,12 @@ watch(isHydrated, (hydrated) => {
   }
 }, { once: true });
 
+/* v8 ignore next 2 -- @preserve */
 const hostResizeObserver = typeof window === 'undefined'
   ? null
   : new ResizeObserver(updateHostOffset);
 
+/* v8 ignore next 2 -- @preserve */
 const itemResizeObserver = typeof window === 'undefined'
   ? null
   : new ResizeObserver((entries) => {
@@ -278,11 +336,13 @@ const itemResizeObserver = typeof window === 'undefined'
       }
     }
 
+    /* v8 ignore else -- @preserve */
     if (updates.length > 0) {
       updateItemSizes(updates);
     }
   });
 
+/* v8 ignore next 2 -- @preserve */
 const extraResizeObserver = typeof window === 'undefined'
   ? null
   : new ResizeObserver(() => {
@@ -292,6 +352,7 @@ const extraResizeObserver = typeof window === 'undefined'
   });
 
 watch(headerRef, (newEl, oldEl) => {
+  /* v8 ignore if -- @preserve */
   if (oldEl) {
     extraResizeObserver?.unobserve(oldEl);
   }
@@ -301,6 +362,7 @@ watch(headerRef, (newEl, oldEl) => {
 }, { immediate: true });
 
 watch(footerRef, (newEl, oldEl) => {
+  /* v8 ignore if -- @preserve */
   if (oldEl) {
     extraResizeObserver?.unobserve(oldEl);
   }
@@ -310,9 +372,9 @@ watch(footerRef, (newEl, oldEl) => {
 }, { immediate: true });
 
 const firstRenderedIndex = computed(() => renderedItems.value[ 0 ]?.index);
-
 watch(firstRenderedIndex, (newIdx, oldIdx) => {
   if (props.direction === 'both') {
+    /* v8 ignore else -- @preserve */
     if (oldIdx !== undefined) {
       const oldEl = itemRefs.get(oldIdx);
       if (oldEl) {
@@ -321,6 +383,7 @@ watch(firstRenderedIndex, (newIdx, oldIdx) => {
     }
     if (newIdx !== undefined) {
       const newEl = itemRefs.get(newIdx);
+      /* v8 ignore else -- @preserve */
       if (newEl) {
         newEl.querySelectorAll('[data-col-index]').forEach((c) => itemResizeObserver?.observe(c));
       }
@@ -329,6 +392,7 @@ watch(firstRenderedIndex, (newIdx, oldIdx) => {
 }, { flush: 'post' });
 
 onMounted(() => {
+  /* v8 ignore else -- @preserve */
   if (hostRef.value) {
     hostResizeObserver?.observe(hostRef.value);
   }
@@ -339,8 +403,10 @@ onMounted(() => {
   }
 
   // Observe cells of the first rendered item
+  /* v8 ignore else -- @preserve */
   if (firstRenderedIndex.value !== undefined) {
     const el = itemRefs.get(firstRenderedIndex.value);
+    /* v8 ignore else -- @preserve */
     if (el) {
       el.querySelectorAll('[data-col-index]').forEach((c) => itemResizeObserver?.observe(c));
     }
@@ -362,6 +428,7 @@ function setItemRef(el: unknown, index: number) {
     itemResizeObserver?.observe(el as HTMLElement);
   } else {
     const oldEl = itemRefs.get(index);
+    /* v8 ignore else -- @preserve */
     if (oldEl) {
       itemResizeObserver?.unobserve(oldEl);
       itemRefs.delete(index);
@@ -385,37 +452,41 @@ function handleKeyDown(event: KeyboardEvent) {
     const lastItemIndex = props.items.length - 1;
     const lastColIndex = (props.columnCount || 0) > 0 ? props.columnCount - 1 : 0;
 
-    if (isHorizontal && isVertical) {
-      scrollToIndex(lastItemIndex, lastColIndex, 'end');
+    if (isHorizontal) {
+      if (isVertical) {
+        scrollToIndex(lastItemIndex, lastColIndex, 'end');
+      } else {
+        scrollToIndex(0, lastItemIndex, 'end');
+      }
     } else {
-      scrollToIndex(0, lastItemIndex, 'end');
+      scrollToIndex(lastItemIndex, 0, 'end');
     }
     return;
   }
   if (event.key === 'ArrowUp') {
     event.preventDefault();
-    scrollToOffset(null, scrollOffset.y - 40);
+    scrollToOffset(null, scrollOffset.y - DEFAULT_ITEM_SIZE);
     return;
   }
   if (event.key === 'ArrowDown') {
     event.preventDefault();
-    scrollToOffset(null, scrollOffset.y + 40);
+    scrollToOffset(null, scrollOffset.y + DEFAULT_ITEM_SIZE);
     return;
   }
   if (event.key === 'ArrowLeft') {
     event.preventDefault();
-    scrollToOffset(scrollOffset.x - 40, null);
+    scrollToOffset(scrollOffset.x - DEFAULT_ITEM_SIZE, null);
     return;
   }
   if (event.key === 'ArrowRight') {
     event.preventDefault();
-    scrollToOffset(scrollOffset.x + 40, null);
+    scrollToOffset(scrollOffset.x + DEFAULT_ITEM_SIZE, null);
     return;
   }
   if (event.key === 'PageUp') {
     event.preventDefault();
     scrollToOffset(
-      isHorizontal ? scrollOffset.x - viewportSize.width : null,
+      !isVertical && isHorizontal ? scrollOffset.x - viewportSize.width : null,
       isVertical ? scrollOffset.y - viewportSize.height : null,
     );
     return;
@@ -423,7 +494,7 @@ function handleKeyDown(event: KeyboardEvent) {
   if (event.key === 'PageDown') {
     event.preventDefault();
     scrollToOffset(
-      isHorizontal ? scrollOffset.x + viewportSize.width : null,
+      !isVertical && isHorizontal ? scrollOffset.x + viewportSize.width : null,
       isVertical ? scrollOffset.y + viewportSize.height : null,
     );
   }
@@ -508,10 +579,10 @@ function getItemStyle(item: RenderedItem<T>) {
 
   if (isDynamic) {
     if (!isVertical) {
-      style.minInlineSize = `${ item.size.width }px`;
+      style.minInlineSize = '1px';
     }
     if (!isHorizontal) {
-      style.minBlockSize = `${ item.size.height }px`;
+      style.minBlockSize = '1px';
     }
   }
 
@@ -534,6 +605,11 @@ function getItemStyle(item: RenderedItem<T>) {
   return style;
 }
 
+const isDebug = computed(() => props.debug);
+const isTable = computed(() => props.containerTag === 'table');
+const headerTag = computed(() => isTable.value ? 'thead' : 'div');
+const footerTag = computed(() => isTable.value ? 'tfoot' : 'div');
+
 defineExpose({
   scrollDetails,
   columnRange,
@@ -555,7 +631,7 @@ defineExpose({
       {
         'virtual-scroll--hydrated': isHydrated,
         'virtual-scroll--window': isWindowContainer,
-        'virtual-scroll--table': containerTag === 'table',
+        'virtual-scroll--table': isTable,
       },
     ]"
     :style="containerStyle"
@@ -565,15 +641,17 @@ defineExpose({
     @pointerdown.passive="stopProgrammaticScroll"
     @touchstart.passive="stopProgrammaticScroll"
   >
+    <!-- v8 ignore start -->
     <component
-      :is="containerTag === 'table' ? 'thead' : 'div'"
-      v-if="$slots.header"
+      :is="headerTag"
+      v-if="slots.header"
       ref="headerRef"
       class="virtual-scroll-header"
       :class="{ 'virtual-scroll--sticky': stickyHeader }"
     >
       <slot name="header" />
     </component>
+    <!-- v8 ignore stop -->
 
     <component
       :is="wrapperTag"
@@ -582,14 +660,16 @@ defineExpose({
       :style="wrapperStyle"
     >
       <!-- Phantom element to push scroll height -->
+      <!-- v8 ignore start -->
       <component
         :is="itemTag"
-        v-if="containerTag === 'table'"
+        v-if="isTable"
         class="virtual-scroll-spacer"
         :style="spacerStyle"
       >
         <td style="padding: 0; border: none; block-size: inherit;" />
       </component>
+      <!-- v8 ignore stop -->
 
       <component
         :is="itemTag"
@@ -619,8 +699,9 @@ defineExpose({
       </component>
     </component>
 
+    <!-- v8 ignore start -->
     <div
-      v-if="loading && $slots.loading"
+      v-if="loading && slots.loading"
       class="virtual-scroll-loading"
       :style="loadingStyle"
     >
@@ -628,14 +709,15 @@ defineExpose({
     </div>
 
     <component
-      :is="containerTag === 'table' ? 'tfoot' : 'div'"
-      v-if="$slots.footer"
+      :is="footerTag"
+      v-if="slots.footer"
       ref="footerRef"
       class="virtual-scroll-footer"
       :class="{ 'virtual-scroll--sticky': stickyFooter }"
     >
       <slot name="footer" />
     </component>
+    <!-- v8 ignore stop -->
   </component>
 </template>