@v-c/virtual-list 0.0.1

package/src/ScrollBar.tsx

@@ -0,0 +1,298 @@
+import { computed, type CSSProperties, defineComponent, onMounted, onUnmounted, type PropType, ref, shallowRef, watch } from 'vue'
+
+export interface ScrollBarProps {
+  prefixCls: string
+  scrollOffset: number
+  scrollRange: number
+  rtl: boolean
+  onScroll: (scrollOffset: number, horizontal?: boolean) => void
+  onStartMove: () => void
+  onStopMove: () => void
+  horizontal?: boolean
+  style?: CSSProperties
+  thumbStyle?: CSSProperties
+  spinSize: number
+  containerSize: number
+  showScrollBar?: boolean | 'optional'
+}
+
+export interface ScrollBarRef {
+  delayHidden: () => void
+}
+
+function getPageXY(
+  e: MouseEvent | TouchEvent,
+  horizontal: boolean,
+): number {
+  const obj = 'touches' in e ? e.touches[0] : e
+  return obj[horizontal ? 'pageX' : 'pageY'] - window[horizontal ? 'scrollX' : 'scrollY']
+}
+
+export default defineComponent({
+  name: 'ScrollBar',
+  props: {
+    prefixCls: { type: String, required: true },
+    scrollOffset: { type: Number, required: true },
+    scrollRange: { type: Number, required: true },
+    rtl: { type: Boolean, default: false },
+    onScroll: { type: Function as PropType<(scrollOffset: number, horizontal?: boolean) => void>, required: true },
+    onStartMove: { type: Function as PropType<() => void>, required: true },
+    onStopMove: { type: Function as PropType<() => void>, required: true },
+    horizontal: { type: Boolean, default: false },
+    style: Object as PropType<CSSProperties>,
+    thumbStyle: Object as PropType<CSSProperties>,
+    spinSize: { type: Number, required: true },
+    containerSize: { type: Number, required: true },
+    showScrollBar: { type: [Boolean, String] as PropType<boolean | 'optional'> },
+  },
+  setup(props, { expose }) {
+    const dragging = ref(false)
+    const pageXY = ref<number | null>(null)
+    const startTop = ref<number | null>(null)
+
+    const isLTR = computed(() => !props.rtl)
+
+    // Refs
+    const scrollbarRef = shallowRef<HTMLDivElement>()
+    const thumbRef = shallowRef<HTMLDivElement>()
+
+    // Visible
+    // When showScrollBar is 'optional', start as visible (true)
+    // When showScrollBar is true/false, use that value
+    const visible = ref(props.showScrollBar === 'optional' ? true : props.showScrollBar)
+    let visibleTimeout: ReturnType<typeof setTimeout> | null = null
+
+    const delayHidden = () => {
+      // Don't auto-hide if showScrollBar is explicitly true or false
+      if (props.showScrollBar === true || props.showScrollBar === false)
+        return
+      if (visibleTimeout)
+        clearTimeout(visibleTimeout)
+      visible.value = true
+      visibleTimeout = setTimeout(() => {
+        visible.value = false
+      }, 3000)
+    }
+
+    // Range
+    const enableScrollRange = computed(() => props.scrollRange - props.containerSize || 0)
+    const enableOffsetRange = computed(() => props.containerSize - props.spinSize || 0)
+
+    // Top position
+    const top = computed(() => {
+      if (props.scrollOffset === 0 || enableScrollRange.value === 0) {
+        return 0
+      }
+      const ptg = props.scrollOffset / enableScrollRange.value
+      return ptg * enableOffsetRange.value
+    })
+
+    // State ref for event handlers
+    const stateRef = shallowRef({
+      top: top.value,
+      dragging: dragging.value,
+      pageY: pageXY.value,
+      startTop: startTop.value,
+    })
+
+    watch([top, dragging, pageXY, startTop], () => {
+      stateRef.value = {
+        top: top.value,
+        dragging: dragging.value,
+        pageY: pageXY.value,
+        startTop: startTop.value,
+      }
+    })
+
+    const onContainerMouseDown = (e: MouseEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    const onThumbMouseDown = (e: MouseEvent | TouchEvent) => {
+      dragging.value = true
+      pageXY.value = getPageXY(e, props.horizontal || false)
+      startTop.value = stateRef.value.top
+
+      props.onStartMove()
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    // Effect: Add passive:false event listeners
+    onMounted(() => {
+      const onScrollbarTouchStart = (e: TouchEvent) => {
+        e.preventDefault()
+      }
+
+      const scrollbarEle = scrollbarRef.value
+      const thumbEle = thumbRef.value
+
+      if (scrollbarEle && thumbEle) {
+        scrollbarEle.addEventListener('touchstart', onScrollbarTouchStart, { passive: false })
+        thumbEle.addEventListener('touchstart', onThumbMouseDown as any, { passive: false })
+
+        onUnmounted(() => {
+          scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart)
+          thumbEle.removeEventListener('touchstart', onThumbMouseDown as any)
+        })
+      }
+    })
+
+    // Effect: Handle dragging
+    watch(dragging, (isDragging) => {
+      if (isDragging) {
+        let moveRafId: number | null = null
+
+        const onMouseMove = (e: MouseEvent | TouchEvent) => {
+          const {
+            dragging: stateDragging,
+            pageY: statePageY,
+            startTop: stateStartTop,
+          } = stateRef.value
+
+          if (moveRafId)
+            cancelAnimationFrame(moveRafId)
+
+          const rect = scrollbarRef.value!.getBoundingClientRect()
+          const scale = props.containerSize / (props.horizontal ? rect.width : rect.height)
+
+          if (stateDragging) {
+            const offset = (getPageXY(e, props.horizontal || false) - (statePageY || 0)) * scale
+            let newTop = stateStartTop || 0
+
+            if (!isLTR.value && props.horizontal) {
+              newTop -= offset
+            }
+            else {
+              newTop += offset
+            }
+
+            const tmpEnableScrollRange = enableScrollRange.value
+            const tmpEnableOffsetRange = enableOffsetRange.value
+
+            const ptg: number = tmpEnableOffsetRange ? newTop / tmpEnableOffsetRange : 0
+
+            let newScrollTop = Math.ceil(ptg * tmpEnableScrollRange)
+            newScrollTop = Math.max(newScrollTop, 0)
+            newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange)
+
+            moveRafId = requestAnimationFrame(() => {
+              props.onScroll(newScrollTop, props.horizontal)
+            })
+          }
+        }
+
+        const onMouseUp = () => {
+          dragging.value = false
+          props.onStopMove()
+        }
+
+        window.addEventListener('mousemove', onMouseMove, { passive: true } as any)
+        window.addEventListener('touchmove', onMouseMove, { passive: true } as any)
+        window.addEventListener('mouseup', onMouseUp, { passive: true } as any)
+        window.addEventListener('touchend', onMouseUp, { passive: true } as any)
+
+        onUnmounted(() => {
+          window.removeEventListener('mousemove', onMouseMove)
+          window.removeEventListener('touchmove', onMouseMove)
+          window.removeEventListener('mouseup', onMouseUp)
+          window.removeEventListener('touchend', onMouseUp)
+
+          if (moveRafId)
+            cancelAnimationFrame(moveRafId)
+        })
+      }
+    })
+
+    // Effect: Delay hidden on scroll offset change
+    watch(() => props.scrollOffset, () => {
+      delayHidden()
+    })
+
+    onUnmounted(() => {
+      if (visibleTimeout)
+        clearTimeout(visibleTimeout)
+    })
+
+    // Imperative handle
+    expose({
+      delayHidden,
+    })
+
+    return () => {
+      const scrollbarPrefixCls = `${props.prefixCls}-scrollbar`
+
+      const containerStyle: CSSProperties = {
+        position: 'absolute',
+        visibility: visible.value ? undefined : 'hidden',
+      }
+
+      const thumbStyle: CSSProperties = {
+        position: 'absolute',
+        borderRadius: '99px',
+        background: 'var(--vc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))',
+        cursor: 'pointer',
+        userSelect: 'none',
+      }
+
+      if (props.horizontal) {
+        Object.assign(containerStyle, {
+          height: '8px',
+          left: 0,
+          right: 0,
+          bottom: 0,
+        })
+
+        Object.assign(thumbStyle, {
+          height: '100%',
+          width: `${props.spinSize}px`,
+          [isLTR.value ? 'left' : 'right']: `${top.value}px`,
+        })
+      }
+      else {
+        Object.assign(containerStyle, {
+          width: '8px',
+          top: 0,
+          bottom: 0,
+          [isLTR.value ? 'right' : 'left']: 0,
+        })
+
+        Object.assign(thumbStyle, {
+          width: '100%',
+          height: `${props.spinSize}px`,
+          top: `${top.value}px`,
+        })
+      }
+
+      return (
+        <div
+          ref={scrollbarRef}
+          class={[
+            scrollbarPrefixCls,
+            {
+              [`${scrollbarPrefixCls}-horizontal`]: props.horizontal,
+              [`${scrollbarPrefixCls}-vertical`]: !props.horizontal,
+              [`${scrollbarPrefixCls}-visible`]: visible.value,
+            },
+          ]}
+          style={{ ...containerStyle, ...props.style }}
+          onMousedown={onContainerMouseDown}
+          onMousemove={delayHidden}
+        >
+          <div
+            ref={thumbRef}
+            class={[
+              `${scrollbarPrefixCls}-thumb`,
+              {
+                [`${scrollbarPrefixCls}-thumb-moving`]: dragging.value,
+              },
+            ]}
+            style={{ ...thumbStyle, ...props.thumbStyle }}
+            onMousedown={onThumbMouseDown}
+          />
+        </div>
+      )
+    }
+  },
+})

package/src/__tests__/List.test.ts

@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import VirtualList from '../List'
+
+describe('virtualList', () => {
+  it('should render basic list', () => {
+    const data = Array.from({ length: 100 }, (_, i) => ({ id: i, text: `Item ${i}` }))
+
+    const wrapper = mount(VirtualList, {
+      props: {
+        data,
+        height: 200,
+        itemHeight: 20,
+        itemKey: 'id',
+      },
+      slots: {
+        default: ({ item }: any) => h('div', `${item.text}`),
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.vc-virtual-list').exists()).toBe(true)
+  })
+
+  it('should handle empty data', () => {
+    const wrapper = mount(VirtualList, {
+      props: {
+        data: [],
+        height: 200,
+        itemHeight: 20,
+        itemKey: 'id',
+      },
+      slots: {
+        default: ({ item }: any) => h('div', `${item.text}`),
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it('should work with function itemKey', () => {
+    const data = Array.from({ length: 100 }, (_, i) => ({ id: i, text: `Item ${i}` }))
+
+    const wrapper = mount(VirtualList, {
+      props: {
+        data,
+        height: 200,
+        itemHeight: 20,
+        itemKey: (item: any) => item.id,
+      },
+      slots: {
+        default: ({ item }: any) => h('div', `${item.text}`),
+      },
+    })
+
+    expect(wrapper.exists()).toBe(true)
+  })
+})

package/src/hooks/useDiffItem.ts

@@ -0,0 +1,27 @@
+import { ref, type Ref, watch } from 'vue'
+
+export default function useDiffItem<T>(data: Ref<T[]>, getKey: (item: T) => any): Ref<T | undefined> {
+  const prevDataRef = ref<T[]>([])
+  const diffItem = ref<T>()
+
+  watch(
+    data,
+    (newData) => {
+      const prevData = prevDataRef.value
+
+      if (newData !== prevData) {
+        // Find added item
+        const addedItem = newData.find((item) => {
+          const key = getKey(item)
+          return !prevData.some(prevItem => getKey(prevItem) === key)
+        })
+
+        diffItem.value = addedItem
+        prevDataRef.value = newData
+      }
+    },
+    { immediate: true },
+  )
+
+  return diffItem
+}

package/src/hooks/useFrameWheel.ts

@@ -0,0 +1,141 @@
+import { onUnmounted, ref, type Ref } from 'vue'
+import isFF from '../utils/isFirefox'
+import useOriginScroll from './useOriginScroll'
+
+interface FireFoxDOMMouseScrollEvent {
+  detail: number
+  preventDefault: VoidFunction
+}
+
+export default function useFrameWheel(
+  inVirtual: Ref<boolean>,
+  isScrollAtTop: Ref<boolean>,
+  isScrollAtBottom: Ref<boolean>,
+  isScrollAtLeft: Ref<boolean>,
+  isScrollAtRight: Ref<boolean>,
+  horizontalScroll: boolean,
+  /**
+   * Return `true` when you need to prevent default event
+   */
+  onWheelDelta: (offset: number, horizontal: boolean) => void,
+): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] {
+  const offsetRef = ref(0)
+  let nextFrame: number | null = null
+
+  // Firefox patch
+  const wheelValueRef = ref<number | null>(null)
+  const isMouseScrollRef = ref<boolean>(false)
+
+  // Scroll status sync
+  const originScroll = useOriginScroll(
+    isScrollAtTop,
+    isScrollAtBottom,
+    isScrollAtLeft,
+    isScrollAtRight,
+  )
+
+  function onWheelY(e: WheelEvent, deltaY: number) {
+    if (nextFrame)
+      cancelAnimationFrame(nextFrame)
+
+    // Do nothing when scroll at the edge, Skip check when is in scroll
+    if (originScroll(false, deltaY))
+      return
+
+    // Skip if nest List has handled this event
+    const event = e as WheelEvent & {
+      _virtualHandled?: boolean
+    }
+    if (!event._virtualHandled) {
+      event._virtualHandled = true
+    }
+    else {
+      return
+    }
+
+    offsetRef.value += deltaY
+    wheelValueRef.value = deltaY
+
+    // Proxy of scroll events
+    if (!isFF) {
+      event.preventDefault()
+    }
+
+    nextFrame = requestAnimationFrame(() => {
+      // Patch a multiple for Firefox to fix wheel number too small
+      const patchMultiple = isMouseScrollRef.value ? 10 : 1
+      onWheelDelta(offsetRef.value * patchMultiple, false)
+      offsetRef.value = 0
+    })
+  }
+
+  function onWheelX(event: WheelEvent, deltaX: number) {
+    onWheelDelta(deltaX, true)
+
+    if (!isFF) {
+      event.preventDefault()
+    }
+  }
+
+  // Check for which direction does wheel do. `sx` means `shift + wheel`
+  const wheelDirectionRef = ref<'x' | 'y' | 'sx' | null>(null)
+  let wheelDirectionClean: number | null = null
+
+  function onWheel(event: WheelEvent) {
+    if (!inVirtual.value)
+      return
+
+    // Wait for 2 frame to clean direction
+    if (wheelDirectionClean)
+      cancelAnimationFrame(wheelDirectionClean)
+    wheelDirectionClean = requestAnimationFrame(() => {
+      wheelDirectionRef.value = null
+    })
+
+    const { deltaX, deltaY, shiftKey } = event
+
+    let mergedDeltaX = deltaX
+    let mergedDeltaY = deltaY
+
+    if (
+      wheelDirectionRef.value === 'sx'
+      || (!wheelDirectionRef.value && (shiftKey || false) && deltaY && !deltaX)
+    ) {
+      mergedDeltaX = deltaY
+      mergedDeltaY = 0
+
+      wheelDirectionRef.value = 'sx'
+    }
+
+    const absX = Math.abs(mergedDeltaX)
+    const absY = Math.abs(mergedDeltaY)
+
+    if (wheelDirectionRef.value === null) {
+      wheelDirectionRef.value = horizontalScroll && absX > absY ? 'x' : 'y'
+    }
+
+    if (wheelDirectionRef.value === 'y') {
+      onWheelY(event, mergedDeltaY)
+    }
+    else {
+      onWheelX(event, mergedDeltaX)
+    }
+  }
+
+  // A patch for firefox
+  function onFireFoxScroll(event: FireFoxDOMMouseScrollEvent) {
+    if (!inVirtual.value)
+      return
+
+    isMouseScrollRef.value = event.detail === wheelValueRef.value
+  }
+
+  onUnmounted(() => {
+    if (nextFrame)
+      cancelAnimationFrame(nextFrame)
+    if (wheelDirectionClean)
+      cancelAnimationFrame(wheelDirectionClean)
+  })
+
+  return [onWheel, onFireFoxScroll]
+}

package/src/hooks/useGetSize.ts

@@ -0,0 +1,44 @@
+import type { GetKey } from '../interface'
+import type CacheMap from '../utils/CacheMap'
+import { computed, type ComputedRef, type Ref } from 'vue'
+
+export function useGetSize<T>(
+  mergedData: Ref<T[]>,
+  getKey: GetKey<T>,
+  heights: CacheMap,
+  itemHeight: number,
+): ComputedRef<(startKey: any, endKey?: any) => { top: number, bottom: number }> {
+  return computed(() => {
+    return (startKey: any, endKey?: any) => {
+      let topIndex = 0
+      let bottomIndex = mergedData.value.length - 1
+
+      if (startKey !== undefined && startKey !== null) {
+        topIndex = mergedData.value.findIndex(item => getKey(item) === startKey)
+      }
+
+      if (endKey !== undefined && endKey !== null) {
+        bottomIndex = mergedData.value.findIndex(item => getKey(item) === endKey)
+      }
+
+      let top = 0
+      for (let i = 0; i < topIndex; i += 1) {
+        const key = getKey(mergedData.value[i])
+        const cacheHeight = heights.get(key)
+        top += cacheHeight === undefined ? itemHeight : cacheHeight
+      }
+
+      let bottom = 0
+      for (let i = mergedData.value.length - 1; i > bottomIndex; i -= 1) {
+        const key = getKey(mergedData.value[i])
+        const cacheHeight = heights.get(key)
+        bottom += cacheHeight === undefined ? itemHeight : cacheHeight
+      }
+
+      return {
+        top,
+        bottom,
+      }
+    }
+  })
+}

package/src/hooks/useHeights.ts

@@ -0,0 +1,106 @@
+import type { Key } from '@v-c/util/dist/type'
+import type { GetKey } from '../interface'
+import { onUnmounted, ref, type Ref } from 'vue'
+import CacheMap from '../utils/CacheMap'
+
+function parseNumber(value: string) {
+  const num = parseFloat(value)
+  return isNaN(num) ? 0 : num
+}
+
+export default function useHeights<T>(
+  getKey: GetKey<T>,
+  onItemAdd?: (item: T) => void,
+  onItemRemove?: (item: T) => void,
+): [
+  setInstanceRef: (item: T, instance: HTMLElement | null) => void,
+  collectHeight: (sync?: boolean) => void,
+  cacheMap: CacheMap,
+  updatedMark: Ref<number>,
+  ] {
+  const updatedMark = ref(0)
+  const instanceRef = ref(new Map<Key, HTMLElement>())
+  const heightsRef = ref(new CacheMap())
+
+  const promiseIdRef = ref<number>(0)
+
+  function cancelRaf() {
+    promiseIdRef.value += 1
+  }
+
+  function collectHeight(sync = false) {
+    cancelRaf()
+
+    const doCollect = () => {
+      let changed = false
+
+      instanceRef.value.forEach((element, key) => {
+        if (element && element.offsetParent) {
+          const { offsetHeight } = element
+          const { marginTop, marginBottom } = getComputedStyle(element)
+
+          const marginTopNum = parseNumber(marginTop)
+          const marginBottomNum = parseNumber(marginBottom)
+          const totalHeight = offsetHeight + marginTopNum + marginBottomNum
+
+          if (heightsRef.value.get(key) !== totalHeight) {
+            heightsRef.value.set(key, totalHeight)
+            changed = true
+          }
+        }
+      })
+
+      // Always trigger update mark to tell parent that should re-calculate heights when resized
+      if (changed) {
+        updatedMark.value += 1
+      }
+    }
+
+    if (sync) {
+      doCollect()
+    }
+    else {
+      promiseIdRef.value += 1
+      const id = promiseIdRef.value
+      Promise.resolve().then(() => {
+        if (id === promiseIdRef.value) {
+          doCollect()
+        }
+      })
+    }
+  }
+
+  function setInstanceRef(item: T, instance: HTMLElement | null) {
+    const key = getKey(item)
+    const origin = instanceRef.value.get(key)
+
+    // Only update if the instance actually changed
+    if (origin === instance) {
+      return
+    }
+
+    if (instance) {
+      instanceRef.value.set(key, instance)
+      collectHeight()
+    }
+    else {
+      instanceRef.value.delete(key)
+    }
+
+    // Instance changed
+    if (!origin !== !instance) {
+      if (instance) {
+        onItemAdd?.(item)
+      }
+      else {
+        onItemRemove?.(item)
+      }
+    }
+  }
+
+  onUnmounted(() => {
+    cancelRaf()
+  })
+
+  return [setInstanceRef, collectHeight, heightsRef.value, updatedMark]
+}