feat(useVirtualList): horizontal list

[Surof1n]

Description

add horizontal scroll to useVirtualList, fixes #2285

Additional context

I would like to know if I was moving in the right direction for a solution. Thanks

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[Surof1n]

The only question is maybe we don't should set display: flex on the container, but then the developer needs to manually create horizontal scrolling.

[Surof1n]

@antfu Hello, sorry for the link, can you tell me if this PR can be expected to be verified, or is something else needed?

[antfu]

The return types seems introduce a breaking change, is it intentional?

[Surof1n]

If you look at this feature, you will notice that there are no breaking changes.

export function useVirtualList <T = any>(list: MaybeRef<T[]>, options: UseVirtualListOptions): UseVirtualListReturn<T> {
  const { containerStyle, wrapperProps, scrollTo, calculateRange, currentList, containerRef } = 'itemHeight' in options
    ? useVerticalVirtualList(options, list)
    : useHorizontalVirtualList(options, list)

  return {
    list: currentList,
    scrollTo,
    containerProps: {
      ref: containerRef,
      onScroll: () => {
        calculateRange()
      },
      style: containerStyle,
    },
    wrapperProps,
  }
}

The original function still returns the same object as before.

It's just that the object has different values ​​depending on the direction of the list passed, but nothing has changed for the vertical sheet.