feat(useVirtualList): add useVirtualList function

[caozhong1996]

hi~, I hope to do a trivial thing for vueuse:

virtual list migrating from ahooks to Composition API

[antfu]

Does the usage for this function requires certain styles on the client side? If so, I'd feel it's better to be wrapped with a component instead of a compassable function for easier usage (which in this way, will be out-of-scope of VueUse)

[caozhong1996]

This is the minimal requirement of useVirtualList.

<script setup lang="ts">
import { useVirtualList } from '.'

const { list, containerProps, wrapperProps } = useVirtualList(
  Array.from(Array(99999).keys()),
  {
    itemHeight: 22,
  },
)

</script>
<template>
  <div>
    <div
      v-bind="containerProps"
      style="height: 300px;"
    >
      <div v-bind="wrapperProps">
        <div
          v-for="ele in list"
          :key="ele.index"
        >
          Row: {{ ele.data }}
        </div>
      </div>
    </div>
  </div>
</template>

[caozhong1996]

Yes, It's more like a headless component.
是的，它更像是一个无头组件。

Sometimes component libraries do not fully meet our requirements.
有时候组件库并不完全满足我们的要求。

For example, component's style is not satisfied, but we need their internal logic.
例如组件的样式不满足，但是我们需要组件的内部逻辑。

Unfortunately, current vue component library does not support using without UI.
不幸的是，当前的vue组件库并不支持在无UI的情况下使用。

I believe the composition API can solve this problem.
我相信 composition API 可以解决这个问题。

Will vueuse take consider of headless component ?
vueuse会考虑无头组件这个方向吗？

My English is not very good, thanks.
我的英语不太好，谢谢！

[Jay214]

I had the same idea, but I don't think this implementation is very elegant after trying

[antfu]

I see. That does make some sense. We do have some headless versions of compsoables. https://vueuse.org/guide/components.html

I guess for this, we might better to advocate to use component version first, then fallback to composable for advanced usages. /cc @wheatjs WDYT?

[wheatjs]

I see. That does make some sense. We do have some headless versions of compsoables. https://vueuse.org/guide/components.html

I guess for this, we might better to advocate to use component version first, then fallback to composable for advanced usages. /cc @wheatjs WDYT?

Seems like it would be useful. Wondering about how this might work on the body though. Like if you wanted the scroll container to be the body not sure if that would be possible with the renderless component unless maybe we allow users to set that as a prop.

[antfu]

Can you reduce the usage example in README.md to show the minimal requirements?

Also, it would be great if you can create component.ts for headless component in @vueuse/components (Refer to a4199cd)

Thanks.

[caozhong1996]

OK, I'll do it tomorrow.

[caozhong1996]

Hi, I think It's ready ! @antfu

[caozhong1996]

Thanks!