@v-c/virtual-list 0.0.1 → 1.0.0

package/src/List.tsx

@@ -1,26 +1,28 @@
 import type { Key } from '@v-c/util/dist/type'
 
+import type { CSSProperties, PropType, VNode } from 'vue'
+import type { InnerProps } from './Filler'
 import type { ExtraRenderInfo } from './interface'
+import type { ScrollBarDirectionType, ScrollBarRef } from './ScrollBar'
 import ResizeObserver from '@v-c/resize-observer'
+import { pureAttrs } from '@v-c/util/dist/props-util'
 import {
   computed,
-  type CSSProperties,
   defineComponent,
-  type PropType,
   ref,
   shallowRef,
-  type VNode,
   watch,
 } from 'vue'
-import Filler, { type InnerProps } from './Filler'
+import Filler from './Filler'
 import useDiffItem from './hooks/useDiffItem'
 import useFrameWheel from './hooks/useFrameWheel'
 import { useGetSize } from './hooks/useGetSize'
 import useHeights from './hooks/useHeights'
 import useMobileTouchMove from './hooks/useMobileTouchMove'
 import useScrollDrag from './hooks/useScrollDrag'
+import useScrollTo from './hooks/useScrollTo'
 import Item from './Item'
-import ScrollBar, { type ScrollBarRef } from './ScrollBar'
+import ScrollBar from './ScrollBar'
 import { getSpinSize } from './utils/scrollbarUtil'
 
 const EMPTY_DATA: any[] = []
@@ -35,9 +37,11 @@ export interface ScrollInfo {
   y: number
 }
 
+export type ScrollTo = (arg?: number | ScrollConfig | null) => void
+
 export interface ListRef {
   nativeElement?: HTMLDivElement
-  scrollTo: (arg?: number | ScrollConfig) => void
+  scrollTo: ScrollTo
   getScrollInfo: () => ScrollInfo
 }
 
@@ -55,18 +59,33 @@ export interface ScrollTarget {
 
 export type ScrollConfig = ScrollTarget | ScrollPos
 
-export interface ListProps<T = any> {
+export interface ListProps {
   prefixCls?: string
-  data?: T[]
+  data?: any[]
   height?: number
   itemHeight?: number
   fullHeight?: boolean
-  itemKey: Key | ((item: T) => Key)
+  itemKey: Key | ((item: any) => Key)
   component?: string
   virtual?: boolean
+  direction?: ScrollBarDirectionType
+  /**
+   * By default `scrollWidth` is same as container.
+   * When set this, it will show the horizontal scrollbar and
+   * `scrollWidth` will be used as the real width instead of container width.
+   * When set, `virtual` will always be enabled.
+   */
+  scrollWidth?: number
+  styles?: {
+    horizontalScrollBar?: CSSProperties
+    horizontalScrollBarThumb?: CSSProperties
+    verticalScrollBar?: CSSProperties
+    verticalScrollBarThumb?: CSSProperties
+  }
+  showScrollBar?: boolean | 'optional'
   onScroll?: (e: Event) => void
   onVirtualScroll?: (info: ScrollInfo) => void
-  onVisibleChange?: (visibleList: T[], fullList: T[]) => void
+  onVisibleChange?: (visibleList: any[], fullList: any[]) => void
   innerProps?: InnerProps
   extraRender?: (info: ExtraRenderInfo) => VNode
 }
@@ -81,6 +100,10 @@ export default defineComponent({
     fullHeight: { type: Boolean, default: true },
     itemKey: { type: [String, Number, Function] as PropType<Key | ((item: any) => Key)>, required: true },
     component: { type: String, default: 'div' },
+    direction: { type: String as PropType<ScrollBarDirectionType> },
+    scrollWidth: Number,
+    styles: Object,
+    showScrollBar: { type: [Boolean, String] as PropType<boolean | 'optional'>, default: 'optional' },
     virtual: { type: Boolean, default: true },
     onScroll: Function as PropType<(e: Event) => void>,
     onVirtualScroll: Function as PropType<(info: ScrollInfo) => void>,
@@ -88,7 +111,9 @@ export default defineComponent({
     innerProps: Object as PropType<InnerProps>,
     extraRender: Function as PropType<(info: ExtraRenderInfo) => VNode>,
   },
+  inheritAttrs: false,
   setup(props, { expose, attrs, slots }) {
+    const itemHeight = computed(() => props.itemHeight)
     // =============================== Item Key ===============================
     const getKey = (item: any): Key => {
       if (typeof props.itemKey === 'function') {
@@ -120,7 +145,8 @@ export default defineComponent({
       return (
         useVirtual.value
         && data
-        && Math.max(props.itemHeight! * data.length, containerHeight.value) > props.height!
+        && (Math.max(props.itemHeight! * data.length, containerHeight.value) > props.height!
+          || !!props.scrollWidth)
       )
     })
 
@@ -128,6 +154,7 @@ export default defineComponent({
     const fillerInnerRef = ref<HTMLDivElement>()
     const containerRef = ref<HTMLDivElement>()
     const verticalScrollBarRef = shallowRef<ScrollBarRef>()
+    const horizontalScrollBarRef = shallowRef<ScrollBarRef>()
 
     const offsetTop = ref(0)
     const offsetLeft = ref(0)
@@ -135,7 +162,14 @@ export default defineComponent({
 
     // ScrollBar related
     const verticalScrollBarSpinSize = ref(0)
-    const scrollWidth = ref(0)
+    const horizontalScrollBarSpinSize = ref(0)
+    const contentScrollWidth = ref<number>(props.scrollWidth || 0)
+
+    // ========================== Visible Calculation =========================
+    const scrollHeight = ref(0)
+    const start = ref(0)
+    const end = ref(0)
+    const fillerOffset = ref<number | undefined>(undefined)
 
     // ================================ Scroll ================================
     function syncScrollTop(newTop: number | ((prev: number) => number)) {
@@ -159,19 +193,13 @@ export default defineComponent({
     // ================================ Range ================================
     useDiffItem(mergedData, getKey)
 
-    // ========================== Visible Calculation =========================
-    const scrollHeight = ref(0)
-    const start = ref(0)
-    const end = ref(0)
-    const fillerOffset = ref<number | undefined>(undefined)
-
     watch(
       [
-        () => inVirtual.value,
-        () => useVirtual.value,
-        () => offsetTop.value,
-        () => mergedData.value,
-        () => heightUpdatedMark.value,
+        inVirtual,
+        useVirtual,
+        offsetTop,
+        mergedData,
+        heightUpdatedMark,
         () => props.height,
       ],
       () => {
@@ -239,7 +267,7 @@ export default defineComponent({
 
     // Sync scroll top when height changes
     watch(
-      () => scrollHeight.value,
+      scrollHeight,
       () => {
         const changedRecord = heights.getRecord()
         if (changedRecord.size === 1) {
@@ -269,11 +297,14 @@ export default defineComponent({
         width: sizeInfo.offsetWidth,
         height: sizeInfo.offsetHeight,
       }
+      contentScrollWidth.value = props.scrollWidth ?? sizeInfo.offsetWidth
     }
 
     // =============================== Scroll ===============================
+    const isRTL = computed(() => props.direction === 'rtl')
+
     const getVirtualScrollInfo = () => ({
-      x: offsetLeft.value,
+      x: isRTL.value ? -offsetLeft.value : offsetLeft.value,
       y: offsetTop.value,
     })
 
@@ -294,14 +325,24 @@ export default defineComponent({
     }
 
     // ========================== Scroll Position ===========================
+    const horizontalRange = computed(() =>
+      Math.max(0, (contentScrollWidth.value || 0) - size.value.width),
+    )
+
     const isScrollAtTop = computed(() => offsetTop.value === 0)
     const isScrollAtBottom = computed(() => offsetTop.value + props.height! >= scrollHeight.value)
     const isScrollAtLeft = computed(() => offsetLeft.value === 0)
-    const isScrollAtRight = computed(() => offsetLeft.value + size.value.width >= scrollWidth.value)
+    const isScrollAtRight = computed(() => offsetLeft.value >= horizontalRange.value)
+
+    const keepInHorizontalRange = (nextOffsetLeft: number) => {
+      const max = horizontalRange.value
+      return Math.max(0, Math.min(nextOffsetLeft, max))
+    }
 
     // ========================== Wheel & Touch =========================
     const delayHideScrollBar = () => {
       verticalScrollBarRef.value?.delayHidden()
+      horizontalScrollBarRef.value?.delayHidden()
     }
 
     const [onWheel] = useFrameWheel(
@@ -310,10 +351,13 @@ export default defineComponent({
       isScrollAtBottom,
       isScrollAtLeft,
       isScrollAtRight,
-      false, // horizontalScroll
+      horizontalRange.value > 0,
       (offsetY, isHorizontal) => {
         if (isHorizontal) {
-          // Not implemented yet
+          const next = isRTL.value ? offsetLeft.value - offsetY : offsetLeft.value + offsetY
+          const aligned = keepInHorizontalRange(next)
+          offsetLeft.value = aligned
+          triggerScroll({ x: isRTL.value ? -aligned : aligned })
         }
         else {
           syncScrollTop(top => top + offsetY)
@@ -326,8 +370,11 @@ export default defineComponent({
       componentRef,
       (isHorizontal, offset, _smoothOffset, _e) => {
         if (isHorizontal) {
-          // Not implemented yet
-          return false
+          const next = isRTL.value ? offsetLeft.value - offset : offsetLeft.value + offset
+          const aligned = keepInHorizontalRange(next)
+          offsetLeft.value = aligned
+          triggerScroll({ x: isRTL.value ? -aligned : aligned })
+          return true
         }
         else {
           syncScrollTop(top => top + offset)
@@ -348,7 +395,8 @@ export default defineComponent({
     const onScrollBar = (newScrollOffset: number, horizontal?: boolean) => {
       const newOffset = newScrollOffset
       if (horizontal) {
-        // Not implemented yet
+        offsetLeft.value = newOffset
+        triggerScroll({ x: isRTL.value ? -newOffset : newOffset })
       }
       else {
         syncScrollTop(newOffset)
@@ -365,16 +413,34 @@ export default defineComponent({
 
     // Calculate ScrollBar spin size
     watch(
-      [() => props.height, () => scrollHeight.value, () => inVirtual.value, () => size.value.height],
+      [() => props.height, scrollHeight, inVirtual, () => size.value.height],
       () => {
         if (inVirtual.value && props.height && scrollHeight.value) {
-          // First parameter is container size, second is scroll range
           verticalScrollBarSpinSize.value = getSpinSize(size.value.height, scrollHeight.value)
         }
       },
       { immediate: true },
     )
 
+    watch(
+      [() => size.value.width, () => contentScrollWidth.value],
+      () => {
+        if (inVirtual.value && contentScrollWidth.value) {
+          horizontalScrollBarSpinSize.value = getSpinSize(size.value.width, contentScrollWidth.value)
+        }
+      },
+      { immediate: true },
+    )
+
+    watch(
+      () => props.scrollWidth,
+      (val) => {
+        contentScrollWidth.value = val ?? size.value.width
+        offsetLeft.value = keepInHorizontalRange(offsetLeft.value)
+      },
+      { immediate: true },
+    )
+
     function onFallbackScroll(e: Event) {
       const target = e.currentTarget as HTMLDivElement
       const newScrollTop = target.scrollTop
@@ -387,65 +453,39 @@ export default defineComponent({
     }
 
     // ================================= Ref ==================================
-    const scrollTo = (config?: number | ScrollConfig) => {
-      if (config === null || config === undefined) {
-        return
-      }
-
-      if (typeof config === 'number') {
-        syncScrollTop(config)
-      }
-      else if (config && typeof config === 'object') {
-        let scrollTop: number | undefined
-
-        if ('left' in config) {
-          offsetLeft.value = config.left || 0
-        }
+    const scrollTo = useScrollTo(
+      componentRef as any,
+      mergedData,
+      heights,
+      itemHeight as any,
+      getKey,
+      () => collectHeight(true),
+      syncScrollTop,
+      delayHideScrollBar,
+    )
 
-        if ('top' in config) {
-          scrollTop = config.top
-        }
-        else if ('index' in config) {
-          const index = config.index || 0
-          const item = mergedData.value[index]
-          if (item) {
-            let itemTop = 0
-            for (let i = 0; i < index; i += 1) {
-              const key = getKey(mergedData.value[i])
-              const cacheHeight = heights.get(key)
-              itemTop += cacheHeight === undefined ? props.itemHeight! : cacheHeight
-            }
-            scrollTop = itemTop
-          }
+    expose({
+      nativeElement: containerRef,
+      getScrollInfo: getVirtualScrollInfo,
+      scrollTo: (config: any) => {
+        function isPosScroll(arg: any): arg is ScrollPos {
+          return arg && typeof arg === 'object' && ('left' in arg || 'top' in arg)
         }
-        else if ('key' in config) {
-          const index = mergedData.value.findIndex(item => getKey(item) === config.key)
-          if (index >= 0) {
-            let itemTop = 0
-            for (let i = 0; i < index; i += 1) {
-              const key = getKey(mergedData.value[i])
-              const cacheHeight = heights.get(key)
-              itemTop += cacheHeight === undefined ? props.itemHeight! : cacheHeight
-            }
-            scrollTop = itemTop
+        if (isPosScroll(config)) {
+          if (config.left !== undefined) {
+            offsetLeft.value = keepInHorizontalRange(config.left)
           }
+          scrollTo(config.top as any)
         }
-
-        if (scrollTop !== undefined) {
-          syncScrollTop(scrollTop)
+        else {
+          scrollTo(config)
         }
-      }
-    }
-
-    expose({
-      nativeElement: containerRef,
-      getScrollInfo: getVirtualScrollInfo,
-      scrollTo,
+      },
     })
 
     // ================================ Effect ================================
     watch(
-      [() => start.value, () => end.value, () => mergedData.value],
+      [start, end, mergedData],
       () => {
         if (props.onVisibleChange) {
           const renderList = mergedData.value.slice(start.value, end.value + 1)
@@ -454,54 +494,52 @@ export default defineComponent({
       },
     )
 
-    // ================================ Render ================================
-    const renderChildren = () => {
-      const children: VNode[] = []
-      const data = mergedData.value
-      const defaultSlot = slots.default
+    const getSize = useGetSize(mergedData, getKey, heights, itemHeight as any)
 
-      if (!defaultSlot) {
-        return children
-      }
+    return () => {
+      // ================================ Render ================================
+      const renderChildren = () => {
+        const children: VNode[] = []
+        const data = mergedData.value
+        const defaultSlot = slots.default
 
-      for (let i = start.value; i <= end.value; i += 1) {
-        const item = data[i]
-        const key = getKey(item)
-        // Call the slot function with item, index, and props
-        const nodes = defaultSlot({
-          item,
-          index: i,
-          style: {},
-          offsetX: offsetLeft.value,
-        })
-
-        // Wrap each node in Item component
-        const node = Array.isArray(nodes) ? nodes[0] : nodes
-        if (node) {
-          children.push(
-            <Item key={key} setRef={ele => setInstanceRef(item, ele)}>
-              {node}
-            </Item>,
-          )
+        if (!defaultSlot) {
+          return children
         }
-      }
 
-      return children
-    }
-
-    const getSize = useGetSize(mergedData, getKey, heights, props.itemHeight!)
+        for (let i = start.value; i <= end.value; i += 1) {
+          const item = data[i]
+          const key = getKey(item)
+          // Call the slot function with item, index, and props
+          const nodes = defaultSlot({
+            item,
+            index: i,
+            style: {},
+            offsetX: offsetLeft.value,
+          })
+
+          // Wrap each node in Item component
+          const node = Array.isArray(nodes) ? nodes[0] : nodes
+          if (node) {
+            children.push(
+              <Item key={key} setRef={ele => setInstanceRef(item, ele)}>
+                {node}
+              </Item>,
+            )
+          }
+        }
 
-    return () => {
+        return children
+      }
       const componentStyle: CSSProperties = {}
       if (props.height) {
         componentStyle[props.fullHeight ? 'height' : 'maxHeight'] = `${props.height}px`
         Object.assign(componentStyle, ScrollStyle)
 
-        // Use custom ScrollBar when virtual scrolling is enabled
         if (useVirtual.value) {
           componentStyle.overflowY = 'hidden'
 
-          if (scrollWidth.value) {
+          if (horizontalRange.value > 0) {
             componentStyle.overflowX = 'hidden'
           }
 
@@ -517,7 +555,7 @@ export default defineComponent({
         virtual: inVirtual.value,
         offsetX: offsetLeft.value,
         offsetY: fillerOffset.value || 0,
-        rtl: false,
+        rtl: isRTL.value,
         getSize: getSize.value,
       })
 
@@ -526,8 +564,14 @@ export default defineComponent({
       return (
         <div
           ref={containerRef}
+          {...pureAttrs(attrs)}
           style={{ position: 'relative', ...(attrs.style as CSSProperties) }}
-          class={[props.prefixCls, attrs.class]}
+          dir={isRTL.value ? 'rtl' : undefined}
+          class={[
+            props.prefixCls,
+            { [`${props.prefixCls}-rtl`]: isRTL.value },
+            attrs.class,
+          ]}
         >
           <ResizeObserver onResize={onHolderResize}>
             <Component
@@ -543,10 +587,11 @@ export default defineComponent({
                 height={scrollHeight.value}
                 offsetX={offsetLeft.value}
                 offsetY={fillerOffset.value}
+                scrollWidth={contentScrollWidth.value}
                 onInnerResize={collectHeight}
                 ref={fillerInnerRef}
                 innerProps={props.innerProps}
-                rtl={false}
+                rtl={isRTL.value}
                 extra={extraContent}
               >
                 {renderChildren()}
@@ -554,20 +599,40 @@ export default defineComponent({
             </Component>
           </ResizeObserver>
 
-          {/* ScrollBar */}
           {inVirtual.value && scrollHeight.value > (props.height || 0) && (
             <ScrollBar
               ref={verticalScrollBarRef}
               prefixCls={props.prefixCls}
               scrollOffset={offsetTop.value}
               scrollRange={scrollHeight.value}
-              rtl={false}
+              rtl={isRTL.value}
               onScroll={onScrollBar}
               onStartMove={onScrollbarStartMove}
               onStopMove={onScrollbarStopMove}
               spinSize={verticalScrollBarSpinSize.value}
               containerSize={size.value.height}
-              showScrollBar="optional"
+              showScrollBar={props.showScrollBar}
+              style={(props.styles as any)?.verticalScrollBar}
+              thumbStyle={(props.styles as any)?.verticalScrollBarThumb}
+            />
+          )}
+
+          {inVirtual.value && contentScrollWidth.value > size.value.width && (
+            <ScrollBar
+              ref={horizontalScrollBarRef}
+              prefixCls={props.prefixCls}
+              scrollOffset={offsetLeft.value}
+              scrollRange={contentScrollWidth.value}
+              rtl={isRTL.value}
+              onScroll={onScrollBar}
+              onStartMove={onScrollbarStartMove}
+              onStopMove={onScrollbarStopMove}
+              spinSize={horizontalScrollBarSpinSize.value}
+              containerSize={size.value.width}
+              horizontal
+              showScrollBar={props.showScrollBar}
+              style={(props.styles as any)?.horizontalScrollBar}
+              thumbStyle={(props.styles as any)?.horizontalScrollBarThumb}
             />
           )}
         </div>