feat(VInfiniteScroll): add reset method

closes #20308
closes #19935

packages/api-generator/src/locale/en/VInfiniteScroll.json

@@ -15,5 +15,8 @@
   },
   "events": {
     "load": "Emitted when reaching the start / end threshold, or if triggered when using manual mode."
+  },
+  "exposed": {
+    "reset": "Resets the scroller to its initial state and triggers the load event. Useful when the component is in the 'empty' state and additional loads are needed."
   }
 }

packages/docs/src/examples/v-infinite-scroll/status-reset.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-infinite-scroll ref="infiniteScrollRef" height="300" side="end" @load="load">
+        <template v-for="(item, index) in items" :key="index">
+          <div :class="['px-2', index % 2 === 0 ? 'bg-grey-lighten-2' : '']">
+            Item number {{ item }}
+          </div>
+        </template>
+      </v-infinite-scroll>
+      <v-btn @click="reset">Call reset</v-btn>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const infiniteScrollRef = ref(null)
+
+const items = ref([])
+
+function reset() {
+  items.value = []
+  infiniteScrollRef.value.reset()
+}
+
+function load({ side, done }) {
+  setTimeout(() => {
+    if (items.value.length >= 40) {
+      done('empty')
+      return
+    }
+
+    const arr = Array.from({ length: 10 }, (k, v) => (items.value.at(-1) ?? 0) + 1 + v)
+    items.value = [...items.value, ...arr]
+
+    done('ok')
+  }, 1000)
+}
+</script>
+
+<script>
+export default {
+  data: () => ({
+    items: []
+  }),
+
+  methods: {
+    load({ done }) {
+      setTimeout(() => {
+        if (this.items.length >= 40) {
+          done('empty')
+          return
+        }
+
+        const arr = Array.from({ length: 10 }, (k, v) => (this.items.at(-1) ?? 0) + 1 + v)
+        this.items = [...this.items, ...arr]
+
+        done('ok')
+      }, 1000)
+    },
+    reset() {
+      this.items = []
+      this.$refs.infiniteScrollRef.reset()
+    }
+  }
+}
+</script>

packages/docs/src/pages/en/components/infinite-scroller.md

@@ -141,6 +141,14 @@ The **error** slot is shown if the status `'error'` is returned from the `done`
 
 <ExamplesExample file="v-infinite-scroll/slot-error" />
 
+### Misc
+
+#### Exposed properties
+
+The `v-infinite-scroll` component exposes the `reset()` method, allowing to programatically reset the status to the default after reaching the `empty` state. This makes it possible for load to be called again.
+
+<ExamplesExample file="v-infinite-scroll/status-reset" />
+
 ### Examples
 
 The following is a collection of examples that demonstrate more advanced and real-world use of the `v-infinite-scroll` component.

packages/vuetify/src/components/VInfiniteScroll/VInfiniteScroll.tsx

@@ -292,6 +292,29 @@ export const VInfiniteScroll = genericComponent<VInfiniteScrollSlots>()({
         </Tag>
       )
     })
+
+    function reset () {
+      setStatus(props.side, 'ok')
+
+      nextTick(() => {
+        setScrollAmount(
+          getScrollSize() - previousScrollSize + getScrollAmount(),
+        )
+        if (props.mode !== 'manual') {
+          nextTick(() => {
+            window.requestAnimationFrame(() => {
+              window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                  intersecting(props.side);
+                })
+              })
+            })
+          })
+        }
+      })
+    }
+
+    return { reset }
   },
 })