@pdanpdan/virtual-scroll 0.3.0 → 0.5.0

package/src/components/VirtualScrollbar.test.ts

@@ -0,0 +1,174 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+
+import VirtualScrollbar from './VirtualScrollbar.vue';
+
+describe('virtualScrollbar', () => {
+  describe('rendering', () => {
+    it('renders correctly for vertical axis', () => {
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'vertical',
+          totalSize: 1000,
+          position: 100,
+          viewportSize: 200,
+          scrollToOffset: vi.fn(),
+        },
+      });
+
+      const track = wrapper.find('.virtual-scrollbar-track');
+      expect(track.classes()).toContain('virtual-scrollbar-track--vertical');
+      expect(track.attributes('role')).toBe('scrollbar');
+      expect(track.attributes('aria-orientation')).toBe('vertical');
+
+      const thumb = wrapper.find('.virtual-scrollbar-thumb');
+      expect(thumb.classes()).toContain('virtual-scrollbar-thumb--vertical');
+
+      // viewport is 20% of total size, so thumb should be 20% (minimum is 10%)
+      expect((thumb.element as HTMLElement).style.blockSize).toBe('20%');
+    });
+
+    it('renders correctly for horizontal axis', () => {
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'horizontal',
+          totalSize: 1000,
+          position: 200,
+          viewportSize: 200,
+          scrollToOffset: vi.fn(),
+        },
+      });
+
+      const track = wrapper.find('.virtual-scrollbar-track');
+      expect(track.classes()).toContain('virtual-scrollbar-track--horizontal');
+
+      const thumb = wrapper.find('.virtual-scrollbar-thumb');
+      expect(thumb.classes()).toContain('virtual-scrollbar-thumb--horizontal');
+      expect((thumb.element as HTMLElement).style.inlineSize).toBe('20%');
+    });
+  });
+
+  describe('thumb size', () => {
+    it('enforces minimum thumb size', () => {
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'vertical',
+          totalSize: 10000,
+          position: 0,
+          viewportSize: 100,
+          scrollToOffset: vi.fn(),
+        },
+      });
+
+      const thumb = wrapper.find('.virtual-scrollbar-thumb');
+      // viewportPercent is 1%, but minimum is 10%
+      expect((thumb.element as HTMLElement).style.blockSize).toBe('10%');
+    });
+  });
+
+  describe('interactions', () => {
+    it('calls scrolltooffset when track is clicked', async () => {
+      const scrollToOffset = vi.fn();
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'vertical',
+          totalSize: 1000,
+          position: 0,
+          viewportSize: 200,
+          scrollToOffset,
+        },
+      });
+
+      const track = wrapper.find('.virtual-scrollbar-track');
+
+      // mock getBoundingClientRect for track
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        top: 0,
+        left: 0,
+        width: 10,
+        height: 100,
+        bottom: 100,
+        right: 10,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      } as DOMRect);
+
+      // click at middle of track (50px)
+      // totalSize 1000, viewportSize 200, scrollableRange 800
+      // thumbSize is 20% of 100px = 20px
+      // targetPercent = (50 - 20/2) / (100 - 20) = 40 / 80 = 0.5
+      // targetOffset = 0.5 * 800 = 400
+      await track.trigger('mousedown', { clientY: 50 });
+
+      expect(scrollToOffset).toHaveBeenCalledWith(400);
+    });
+
+    it('emits scrolltooffset when clicked', async () => {
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'vertical',
+          totalSize: 1000,
+          position: 0,
+          viewportSize: 200,
+          scrollToOffset: vi.fn(),
+        },
+      });
+
+      const track = wrapper.find('.virtual-scrollbar-track');
+      vi.spyOn(track.element, 'getBoundingClientRect').mockReturnValue({
+        bottom: 100,
+        height: 100,
+        left: 0,
+        right: 10,
+        top: 0,
+        width: 10,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      } as DOMRect);
+
+      // click at middle
+      await track.trigger('mousedown', { clientY: 50 });
+      expect(wrapper.emitted('scrollToOffset')?.[ 0 ]).toEqual([ 400 ]);
+    });
+
+    it('applies active class when dragging thumb', async () => {
+      const wrapper = mount(VirtualScrollbar, {
+        props: {
+          axis: 'vertical',
+          totalSize: 1000,
+          position: 0,
+          viewportSize: 200,
+          scrollToOffset: vi.fn(),
+        },
+      });
+
+      const thumb = wrapper.find('.virtual-scrollbar-thumb');
+
+      // mock setPointerCapture and releasePointerCapture
+      thumb.element.setPointerCapture = vi.fn();
+      thumb.element.releasePointerCapture = vi.fn();
+
+      // check initial state
+      expect(thumb.classes()).not.toContain('virtual-scrollbar-thumb--active');
+
+      // start dragging
+      await thumb.element.dispatchEvent(new PointerEvent('pointerdown', {
+        clientY: 0,
+        pointerId: 1,
+        bubbles: true,
+        cancelable: true,
+      }));
+      expect(thumb.classes()).toContain('virtual-scrollbar-thumb--active');
+
+      // stop dragging
+      await thumb.element.dispatchEvent(new PointerEvent('pointerup', {
+        pointerId: 1,
+        bubbles: true,
+        cancelable: true,
+      }));
+      expect(thumb.classes()).not.toContain('virtual-scrollbar-thumb--active');
+    });
+  });
+});

package/src/components/VirtualScrollbar.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+/**
+ * A cross-browser consistent virtual scrollbar component.
+ * Can be used independently or as part of the VirtualScroll component.
+ * Supports both vertical and horizontal axes and RTL layouts.
+ */
+import type { VirtualScrollbarProps } from '../types';
+
+import { useVirtualScrollbar } from '../composables/useVirtualScrollbar';
+
+export interface Props extends VirtualScrollbarProps {}
+
+const props = withDefaults(defineProps<Props>(), {
+  axis: 'vertical',
+  isRtl: false,
+});
+
+const emit = defineEmits<{
+  (e: 'scrollToOffset', offset: number): void;
+}>();
+
+const { trackProps, thumbProps } = useVirtualScrollbar({
+  axis: () => props.axis,
+  totalSize: () => props.totalSize,
+  position: () => props.position,
+  viewportSize: () => props.viewportSize,
+  containerId: () => props.containerId,
+  isRtl: () => props.isRtl,
+  scrollToOffset: (offset: number) => {
+    props.scrollToOffset?.(offset);
+    emit('scrollToOffset', offset);
+  },
+});
+</script>
+
+<template>
+  <div v-bind="trackProps">
+    <div v-bind="thumbProps" />
+  </div>
+</template>
+
+<style>
+@layer components {
+  .virtual-scrollbar-track {
+    --vsi-scrollbar-bg: var(--vs-scrollbar-bg, rgba(230, 230, 230, 0.9));
+    --vsi-scrollbar-thumb-bg: var(--vs-scrollbar-thumb-bg, rgba(0, 0, 0, 0.3));
+    --vsi-scrollbar-thumb-hover-bg: var(--vs-scrollbar-thumb-hover-bg, rgba(0, 0, 0, 0.6));
+
+    --vsi-scrollbar-bg: var(--vs-scrollbar-bg, light-dark(rgba(230, 230, 230, 0.9), rgba(30, 30, 30, 0.9)));
+    --vsi-scrollbar-thumb-bg: var(--vs-scrollbar-thumb-bg, light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3)));
+    --vsi-scrollbar-thumb-hover-bg: var(--vs-scrollbar-thumb-hover-bg, light-dark(rgba(0, 0, 0, 0.6), rgba(255, 255, 255, 0.6)));
+
+    --vsi-scrollbar-radius: var(--vs-scrollbar-radius, 4px);
+    --vsi-scrollbar-size: var(--vs-scrollbar-size, 8px);
+
+    position: absolute;
+    contain: layout;
+    background-color: var(--vsi-scrollbar-bg);
+    border-radius: var(--vsi-scrollbar-radius);
+    z-index: 30;
+    transition: opacity 0.2s;
+    user-select: none;
+    -webkit-user-select: none;
+    pointer-events: auto;
+
+    &.virtual-scrollbar-track--vertical {
+      inline-size: var(--vsi-scrollbar-size);
+      inset-block-start: 2px;
+      inset-inline-end: 2px;
+    }
+
+    &.virtual-scrollbar-track--horizontal {
+      block-size: var(--vsi-scrollbar-size);
+      inset-inline-start: 2px;
+      inset-block-end: 2px;
+    }
+  }
+
+  .virtual-scrollbar-thumb {
+    position: absolute;
+    background-color: var(--vsi-scrollbar-thumb-bg);
+    border-radius: var(--vsi-scrollbar-radius);
+    touch-action: none;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &.virtual-scrollbar-thumb--active {
+      background-color: var(--vsi-scrollbar-thumb-hover-bg);
+    }
+
+    &.virtual-scrollbar-thumb--vertical {
+      inline-size: 100%;
+    }
+
+    &.virtual-scrollbar-thumb--horizontal {
+      block-size: 100%;
+    }
+  }
+}
+</style>