@pdanpdan/virtual-scroll 0.9.0 → 0.10.0

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-55dd91b2]{outline-offset:1px;block-size:100%;inline-size:100%;position:relative}.virtual-scroll-container[data-v-55dd91b2]:not(.virtual-scroll--window){overscroll-behavior:contain;overflow:auto}.virtual-scroll-container.virtual-scroll--table[data-v-55dd91b2]{display:block}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-55dd91b2]{scrollbar-width:none;-ms-overflow-style:none}.virtual-scroll-container.virtual-scroll--hide-scrollbar[data-v-55dd91b2]::-webkit-scrollbar{display:none}.virtual-scroll-container.virtual-scroll--horizontal[data-v-55dd91b2],.virtual-scroll-container.virtual-scroll--both[data-v-55dd91b2]{white-space:nowrap}.virtual-scroll-scrollbar-container[data-v-55dd91b2]{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-55dd91b2]{pointer-events:none;position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-wrapper[data-v-55dd91b2]{contain:layout;position:relative}:where(.virtual-scroll--hydrated>.virtual-scroll-wrapper>.virtual-scroll-item[data-v-55dd91b2]){position:absolute;inset-block-start:0;inset-inline-start:0}.virtual-scroll-item[data-v-55dd91b2]{box-sizing:border-box;will-change:transform;display:grid}.virtual-scroll-item[data-v-55dd91b2]:where(.virtual-scroll--debug){background-color:#ff00000d;outline:1px dashed #ff000080}.virtual-scroll-item[data-v-55dd91b2]:where(.virtual-scroll--debug):where(:hover){z-index:100;background-color:#ff00001a}.virtual-scroll-debug-info[data-v-55dd91b2]{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-55dd91b2]{pointer-events:none}.virtual-scroll-header[data-v-55dd91b2],.virtual-scroll-footer[data-v-55dd91b2]{z-index:20;position:relative}.virtual-scroll--sticky[data-v-55dd91b2]{position:sticky}.virtual-scroll--sticky[data-v-55dd91b2]: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-55dd91b2]: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-55dd91b2]:where(.virtual-scroll-item){z-index:10}:is(tbody.virtual-scroll-wrapper[data-v-55dd91b2],thead.virtual-scroll-header[data-v-55dd91b2],tfoot.virtual-scroll-footer[data-v-55dd91b2]),:is(tbody.virtual-scroll-wrapper[data-v-55dd91b2],thead.virtual-scroll-header[data-v-55dd91b2],tfoot.virtual-scroll-footer[data-v-55dd91b2])>tr{min-inline-size:100%;display:inline-flex}:is(tbody.virtual-scroll-wrapper[data-v-55dd91b2],thead.virtual-scroll-header[data-v-55dd91b2],tfoot.virtual-scroll-footer[data-v-55dd91b2])>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-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}}
 /*$vite$:1*/

package/package.json

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

package/src/components/VirtualScroll.vue

@@ -22,6 +22,14 @@ import {
   useVirtualScroll,
 } from '../composables/useVirtualScroll';
 import { useVirtualScrollbar } from '../composables/useVirtualScrollbar';
+import {
+  useCoordinateScalingExtension,
+  useInfiniteLoadingExtension,
+  usePrependRestorationExtension,
+  useRtlExtension,
+  useSnappingExtension,
+  useStickyExtension,
+} from '../extensions/all';
 import { getPaddingX, getPaddingY, isWindowLike } from '../utils/scroll';
 import {
   calculateInertiaStep,
@@ -107,6 +115,17 @@ const instanceId = useId();
  */
 const containerId = computed(() => `vs-container-${ instanceId }`);
 
+const extensions = [
+  useRtlExtension<T>(),
+  useSnappingExtension<T>(),
+  useStickyExtension<T>(),
+  useInfiniteLoadingExtension<T>({
+    onLoad: (dir) => emit('load', dir),
+  }),
+  usePrependRestorationExtension<T>(),
+  useCoordinateScalingExtension<T>(),
+];
+
 const measuredPaddingStart = ref(0);
 const measuredPaddingEnd = ref(0);
 
@@ -202,7 +221,7 @@ const {
   renderedVirtualHeight,
   getRowIndexAt,
   getColIndexAt,
-} = useVirtualScroll(virtualScrollProps);
+} = useVirtualScroll(virtualScrollProps, extensions);
 
 const useVirtualScrolling = computed(() => scaleX.value !== 1 || scaleY.value !== 1);
 
@@ -316,25 +335,6 @@ watch(scrollDetails, (details, oldDetails) => {
       colEnd: details.columnRange.end,
     });
   }
-
-  if (props.loading) {
-    return;
-  }
-
-  // vertical or both
-  if (props.direction !== 'horizontal' && details.totalSize) {
-    const remaining = details.totalSize.height - (details.scrollOffset.y + details.viewportSize.height);
-    if (remaining <= props.loadDistance) {
-      emit('load', 'vertical');
-    }
-  }
-  // horizontal or both
-  if (props.direction !== 'vertical' && details.totalSize) {
-    const remaining = details.totalSize.width - (details.scrollOffset.x + details.viewportSize.width);
-    if (remaining <= props.loadDistance) {
-      emit('load', 'horizontal');
-    }
-  }
 });
 
 watch(isHydrated, (hydrated) => {
@@ -1247,6 +1247,16 @@ defineExpose({
    */
   getItemSize,
 
+  /**
+   * Whether the component is in table mode.
+   */
+  isTable,
+
+  /**
+   * The tag used for rendering items.
+   */
+  itemTag: computed(() => props.itemTag || 'div'),
+
   /**
    * Helper to get the row (or item) index at a specific vertical (or horizontal in horizontal mode) virtual offset (VU).
    * @param offset - The virtual pixel offset.