Merge branch 'main' into main

vueuse · Oct 25, 2022 · 1639646 · 1639646
2 parents 0e7e580 + 24747b6
commit 1639646
Show file tree

Hide file tree

Showing 19 changed files with 268 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/monorepo",
-  "version": "9.3.1",
+  "version": "9.4.0",
   "private": true,
   "packageManager": "pnpm@7.6.0",
   "description": "Collection of essential Vue Composition Utilities",

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/components",
-  "version": "9.3.1",
+  "version": "9.4.0",
   "description": "Renderless components for VueUse",
   "author": "Jacob Clevenger<https://github.com/wheatjs>",
   "license": "MIT",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/core",
-  "version": "9.3.1",
+  "version": "9.4.0",
   "description": "Collection of essential Vue Composition Utilities",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",

diff --git a/packages/core/useVirtualList/component.ts b/packages/core/useVirtualList/component.ts
@@ -35,7 +35,8 @@ export const UseVirtualList = defineComponent<UseVirtualListProps>({
 
     const { list, containerProps, wrapperProps } = useVirtualList(listRef, props.options)
 
-    containerProps.style.height = props.height || '300px'
+    typeof containerProps.style === 'object' && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || '300px')
+
     return () => h('div',
       { ...containerProps },
       [

diff --git a/packages/core/useVirtualList/index.md b/packages/core/useVirtualList/index.md
@@ -27,9 +27,10 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 | State      | Type     | Description                                                                                     |
 |------------|----------|-------------------------------------------------------------------------------------------------|
 | itemHeight | `number` | ensure that the total height of the `wrapper` element is calculated correctly.*                 |
+| itemWidth  | `number` | ensure that the total width of the `wrapper` element is calculated correctly.*                  |
 | overscan   | `number` | number of pre-rendered DOM nodes. Prevents whitespace between items if you scroll very quickly. |
 
-\* The `itemHeight` must be kept in sync with the height of each row rendered. If you are seeing extra whitespace or jitter when scrolling to the bottom of the list, ensure the `itemHeight` is the same height as the row.
+\* The `itemHeight` or `itemWidth` must be kept in sync with the height of each row rendered. If you are seeing extra whitespace or jitter when scrolling to the bottom of the list, ensure the `itemHeight` or `itemWidth` is the same height as the row.
 
 ### Reactive list
 
@@ -63,6 +64,33 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 </template>
 ```
 
+### Horizontal list
+
+```typescript
+import { useVirtualList } from '@vueuse/core'
+
+const allItems = Array.from(Array(99999).keys())
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  allItems,
+  {
+    itemWidth: 200,
+  },
+)
+```
+
+```html
+<template>
+  <div v-bind="containerProps" style="height: 300px">
+    <div v-bind="wrapperProps">
+      <div v-for="item in list" :key="item.index" style="width: 200px">
+        Row: {{ item.data }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
 ## Component Usage
 
 ```html