@v-c/virtual-list 1.0.0 → 1.0.2

package/src/ScrollBar.tsx

@@ -1,287 +0,0 @@
-import type { CSSProperties } from 'vue'
-import raf from '@v-c/util/dist/raf'
-import { computed, defineComponent, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
-
-export type ScrollBarDirectionType = 'ltr' | 'rtl'
-
-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<ScrollBarProps>({
-  name: 'ScrollBar',
-  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 ========================
-    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 ==========================
-    const top = computed(() => {
-      if (props.scrollOffset === 0 || enableScrollRange.value === 0) {
-        return 0
-      }
-      const ptg = props.scrollOffset / enableScrollRange.value
-      return ptg * enableOffsetRange.value
-    })
-
-    // ======================== Thumb =========================
-    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 ========================
-
-    // React make event as passive, but we need to preventDefault
-    // Add event on dom directly instead.
-    // ref: https://github.com/facebook/react/issues/9809
-    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, _O, onCleanup) => {
-      if (isDragging) {
-        let moveRafId: number | null = null
-
-        const onMouseMove = (e: MouseEvent | TouchEvent) => {
-          const {
-            dragging: stateDragging,
-            pageY: statePageY,
-            startTop: stateStartTop,
-          } = stateRef.value
-          raf.cancel(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 = raf(() => {
-              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)
-
-        onCleanup(() => {
-          window.removeEventListener('mousemove', onMouseMove)
-          window.removeEventListener('touchmove', onMouseMove)
-          window.removeEventListener('mouseup', onMouseUp)
-          window.removeEventListener('touchend', onMouseUp)
-
-          raf.cancel(moveRafId!)
-        })
-      }
-    })
-
-    // Effect: Delay hidden on scroll offset change
-    watch(() => props.scrollOffset, (_n, _o, onCleanup) => {
-      delayHidden()
-      onCleanup(() => {
-        if (visibleTimeout) {
-          clearTimeout(visibleTimeout)
-        }
-      })
-    })
-
-    // Imperative handle
-    expose({
-      delayHidden,
-    })
-
-    return () => {
-      const { prefixCls, horizontal } = props
-      const scrollbarPrefixCls = `${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`]: horizontal,
-              [`${scrollbarPrefixCls}-vertical`]: !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

@@ -1,59 +0,0 @@
-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

@@ -1,28 +0,0 @@
-import type { Ref } from 'vue'
-import { 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 as any) === key)
-        })
-
-        diffItem.value = addedItem
-        prevDataRef.value = newData
-      }
-    },
-    { immediate: true },
-  )
-
-  return diffItem
-}

package/src/hooks/useFrameWheel.ts

@@ -1,142 +0,0 @@
-import type { Ref } from 'vue'
-import { onUnmounted, 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

@@ -1,45 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { GetKey } from '../interface'
-import type CacheMap from '../utils/CacheMap'
-import { computed } from 'vue'
-
-export function useGetSize<T>(
-  mergedData: Ref<T[]>,
-  getKey: GetKey<T>,
-  heights: CacheMap,
-  itemHeight: Ref<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.value : 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.value : cacheHeight
-      }
-
-      return {
-        top,
-        bottom,
-      }
-    }
-  })
-}

package/src/hooks/useHeights.ts

@@ -1,107 +0,0 @@
-import type { Key } from '@v-c/util/dist/type'
-import type { Ref } from 'vue'
-import type { GetKey } from '../interface'
-import { onUnmounted, reactive, 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 = reactive(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.get(key) !== totalHeight) {
-            heightsRef.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, updatedMark]
-}