@vuetify/nightly 4.0.0-dev-20230422.0 → 4.0.0-dev-20230426.0

package/dist/vuetify-labs.d.ts

@@ -66019,6 +66019,347 @@ declare const VDataTableFooter: {
     showCurrentPage: BooleanConstructor;
 }>>;
 
+type InfiniteScrollSide = 'start' | 'end' | 'both';
+type InfiniteScrollStatus = 'ok' | 'empty' | 'loading' | 'error';
+type InfiniteScrollSlot = {
+    side: InfiniteScrollSide;
+    props: {
+        onClick: () => (side: InfiniteScrollSide) => void;
+        color: string | undefined;
+    };
+};
+declare const VInfiniteScroll: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            direction: "horizontal" | "vertical";
+            mode: "manual" | "intersect";
+            side: InfiniteScrollSide;
+            loadMoreText: string;
+            emptyText: string;
+        }> & Omit<{
+            direction: "horizontal" | "vertical";
+            mode: "manual" | "intersect";
+            side: InfiniteScrollSide;
+            loadMoreText: string;
+            emptyText: string;
+        } & {
+            height?: string | number | undefined;
+            width?: string | number | undefined;
+            color?: string | undefined;
+            margin?: string | number | undefined;
+            maxHeight?: string | number | undefined;
+            maxWidth?: string | number | undefined;
+            minHeight?: string | number | undefined;
+            minWidth?: string | number | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:loading"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:error"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:empty"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:load-more"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        } & {
+            onLoad?: ((options: {
+                side: InfiniteScrollSide;
+                done: (status: InfiniteScrollStatus) => void;
+            }) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "direction" | "mode" | "side" | "loadMoreText" | "emptyText">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: "load", options: {
+            side: InfiniteScrollSide;
+            done: (status: InfiniteScrollStatus) => void;
+        }) => void;
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            direction: "horizontal" | "vertical";
+            mode: "manual" | "intersect";
+            side: InfiniteScrollSide;
+            loadMoreText: string;
+            emptyText: string;
+        } & {
+            height?: string | number | undefined;
+            width?: string | number | undefined;
+            color?: string | undefined;
+            margin?: string | number | undefined;
+            maxHeight?: string | number | undefined;
+            maxWidth?: string | number | undefined;
+            minHeight?: string | number | undefined;
+            minWidth?: string | number | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                loading?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                error?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                empty?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+                'load-more'?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:loading"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:error"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:empty"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            "v-slot:load-more"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        } & {
+            onLoad?: ((options: {
+                side: InfiniteScrollSide;
+                done: (status: InfiniteScrollStatus) => void;
+            }) => any) | undefined;
+        }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            load: (options: {
+                side: InfiniteScrollSide;
+                done: (status: InfiniteScrollStatus) => void;
+            }) => true;
+        }, string, {
+            direction: "horizontal" | "vertical";
+            mode: "manual" | "intersect";
+            side: InfiniteScrollSide;
+            loadMoreText: string;
+            emptyText: string;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: vue.DebuggerEvent) => void) | ((e: vue.DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: vue.ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
+    } & {
+        direction: "horizontal" | "vertical";
+        mode: "manual" | "intersect";
+        side: InfiniteScrollSide;
+        loadMoreText: string;
+        emptyText: string;
+    } & {
+        height?: string | number | undefined;
+        width?: string | number | undefined;
+        color?: string | undefined;
+        margin?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+    } & {
+        $children?: {} | vue.VNodeChild | {
+            default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            loading?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            error?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            empty?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+            'load-more'?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        "v-slot:loading"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        "v-slot:error"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        "v-slot:empty"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        "v-slot:load-more"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    } & {
+        onLoad?: ((options: {
+            side: InfiniteScrollSide;
+            done: (status: InfiniteScrollStatus) => void;
+        }) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
+    direction: "horizontal" | "vertical";
+    mode: "manual" | "intersect";
+    side: InfiniteScrollSide;
+    loadMoreText: string;
+    emptyText: string;
+} & {
+    height?: string | number | undefined;
+    width?: string | number | undefined;
+    color?: string | undefined;
+    margin?: string | number | undefined;
+    maxHeight?: string | number | undefined;
+    maxWidth?: string | number | undefined;
+    minHeight?: string | number | undefined;
+    minWidth?: string | number | undefined;
+} & {
+    $children?: {} | vue.VNodeChild | {
+        default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    };
+    $slots?: {
+        default?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        loading?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        error?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        empty?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        'load-more'?: ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+    'v-slots'?: {
+        default?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        loading?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        error?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        empty?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+        'load-more'?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    "v-slot:loading"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    "v-slot:error"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    "v-slot:empty"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+    "v-slot:load-more"?: false | ((args_0: InfiniteScrollSlot) => vue.VNodeChild) | undefined;
+} & {
+    onLoad?: ((options: {
+        side: InfiniteScrollSide;
+        done: (status: InfiniteScrollStatus) => void;
+    }) => any) | undefined;
+}, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    load: (options: {
+        side: InfiniteScrollSide;
+        done: (status: InfiniteScrollStatus) => void;
+    }) => true;
+}, string, {
+    direction: "horizontal" | "vertical";
+    mode: "manual" | "intersect";
+    side: InfiniteScrollSide;
+    loadMoreText: string;
+    emptyText: string;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    color: StringConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    side: {
+        type: PropType<InfiniteScrollSide>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    mode: {
+        type: PropType<"manual" | "intersect">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    margin: (StringConstructor | NumberConstructor)[];
+    loadMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+}, vue.ExtractPropTypes<{
+    height: (StringConstructor | NumberConstructor)[];
+    maxHeight: (StringConstructor | NumberConstructor)[];
+    maxWidth: (StringConstructor | NumberConstructor)[];
+    minHeight: (StringConstructor | NumberConstructor)[];
+    minWidth: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
+    color: StringConstructor;
+    direction: {
+        type: PropType<"horizontal" | "vertical">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    side: {
+        type: PropType<InfiniteScrollSide>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    mode: {
+        type: PropType<"manual" | "intersect">;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    margin: (StringConstructor | NumberConstructor)[];
+    loadMoreText: {
+        type: StringConstructor;
+        default: string;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>;
+type VInfiniteScroll = InstanceType<typeof VInfiniteScroll>;
+
 declare const VSkeletonLoader: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
@@ -66302,6 +66643,7 @@ declare const allComponents_d_VForm: typeof VForm;
 declare const allComponents_d_VHover: typeof VHover;
 declare const allComponents_d_VIcon: typeof VIcon;
 declare const allComponents_d_VImg: typeof VImg;
+declare const allComponents_d_VInfiniteScroll: typeof VInfiniteScroll;
 declare const allComponents_d_VInput: typeof VInput;
 declare const allComponents_d_VItem: typeof VItem;
 declare const allComponents_d_VItemGroup: typeof VItemGroup;
@@ -66444,6 +66786,7 @@ declare namespace allComponents_d {
     allComponents_d_VHover as VHover,
     allComponents_d_VIcon as VIcon,
     allComponents_d_VImg as VImg,
+    allComponents_d_VInfiniteScroll as VInfiniteScroll,
     allComponents_d_VInput as VInput,
     allComponents_d_VItem as VItem,
     allComponents_d_VItemGroup as VItemGroup,

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230422.0
+* Vuetify v4.0.0-dev-20230426.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1935,7 +1935,11 @@ var en = {
       item: 'Rating {0} of {1}'
     }
   },
-  loading: 'Loading...'
+  loading: 'Loading...',
+  infiniteScroll: {
+    loadMore: 'Load more',
+    empty: 'No more'
+  }
 };
 
 const LANG_PREFIX = '$vuetify.';
@@ -4135,14 +4139,14 @@ const VIcon = genericComponent()({
 });
 
 // Utilities
-function useIntersectionObserver(callback) {
+function useIntersectionObserver(callback, options) {
   const intersectionRef = ref();
   const isIntersecting = ref(false);
   if (SUPPORTS_INTERSECTION) {
     const observer = new IntersectionObserver(entries => {
       callback?.(entries, observer);
       isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
-    });
+    }, options);
     onBeforeUnmount(() => {
       observer.disconnect();
     });
@@ -20637,6 +20641,211 @@ const VDataTableServer = genericComponent()({
 
 // Types
 
+const VInfiniteScrollIntersect = defineComponent({
+  name: 'VInfiniteScrollIntersect',
+  props: {
+    side: {
+      type: String,
+      required: true
+    },
+    rootRef: null,
+    rootMargin: String
+  },
+  emits: {
+    intersect: side => true
+  },
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver(entries => {}, props.rootMargin ? {
+      root: props.rootRef,
+      rootMargin: props.rootMargin
+    } : undefined);
+    watch(isIntersecting, async val => {
+      if (val) emit('intersect', props.side);
+    });
+    useRender(() => createVNode("div", {
+      "class": "v-infinite-scroll-intersect",
+      "ref": intersectionRef
+    }, [createTextVNode("\xA0")]));
+    return {};
+  }
+});
+const VInfiniteScroll = genericComponent()({
+  name: 'VInfiniteScroll',
+  props: {
+    color: String,
+    direction: {
+      type: String,
+      default: 'vertical',
+      validator: v => ['vertical', 'horizontal'].includes(v)
+    },
+    side: {
+      type: String,
+      default: 'end',
+      validator: v => ['start', 'end', 'both'].includes(v)
+    },
+    mode: {
+      type: String,
+      default: 'intersect',
+      validator: v => ['intersect', 'manual'].includes(v)
+    },
+    margin: [Number, String],
+    loadMoreText: {
+      type: String,
+      default: '$vuetify.infiniteScroll.loadMore'
+    },
+    emptyText: {
+      type: String,
+      default: '$vuetify.infiniteScroll.empty'
+    },
+    ...makeDimensionProps()
+  },
+  emits: {
+    load: options => true
+  },
+  setup(props, _ref2) {
+    let {
+      slots,
+      emit
+    } = _ref2;
+    const rootEl = ref();
+    const startStatus = ref('ok');
+    const endStatus = ref('ok');
+    const margin = computed(() => convertToUnit(props.margin));
+    function setScrollAmount(amount) {
+      if (!rootEl.value) return;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      rootEl.value[property] = amount;
+    }
+    function getScrollAmount() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+      return rootEl.value[property];
+    }
+    function getScrollSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth';
+      return rootEl.value[property];
+    }
+    function getContainerSize() {
+      if (!rootEl.value) return 0;
+      const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth';
+      return rootEl.value[property];
+    }
+    onMounted(() => {
+      if (!rootEl.value) return;
+      if (props.side === 'start') {
+        setScrollAmount(getScrollSize());
+      } else if (props.side === 'both') {
+        setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2);
+      }
+    });
+    function setStatus(side, status) {
+      if (side === 'start') {
+        startStatus.value = status;
+      } else if (side === 'end') {
+        endStatus.value = status;
+      }
+    }
+    function getStatus(side) {
+      return side === 'start' ? startStatus.value : endStatus.value;
+    }
+    let previousScrollSize = 0;
+    function handleIntersect(side) {
+      const status = getStatus(side);
+      if (!rootEl.value || status === 'loading') return;
+      previousScrollSize = getScrollSize();
+      setStatus(side, 'loading');
+      function done(status) {
+        setStatus(side, status);
+        nextTick(() => {
+          if (status === 'ok' && side === 'start') {
+            setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+          }
+        });
+      }
+      emit('load', {
+        side,
+        done
+      });
+    }
+    const {
+      t
+    } = useLocale();
+    function renderSide(side, status) {
+      if (props.side !== side && props.side !== 'both') return;
+      const onClick = () => handleIntersect(side);
+      const slotProps = {
+        side,
+        props: {
+          onClick,
+          color: props.color
+        }
+      };
+      if (status === 'error') return slots.error?.(slotProps);
+      if (status === 'empty') return slots.empty?.(slotProps) ?? createVNode("div", null, [t(props.emptyText)]);
+      if (props.mode === 'manual') {
+        if (status === 'loading') {
+          return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+            "indeterminate": true,
+            "color": props.color
+          }, null);
+        }
+        return slots['load-more']?.(slotProps) ?? createVNode(VBtn, {
+          "variant": "outlined",
+          "color": props.color,
+          "onClick": onClick
+        }, {
+          default: () => [t(props.loadMoreText)]
+        });
+      }
+      return slots.loading?.(slotProps) ?? createVNode(VProgressCircular, {
+        "indeterminate": true,
+        "color": props.color
+      }, null);
+    }
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    useRender(() => {
+      const hasStartIntersect = props.side === 'start' || props.side === 'both';
+      const hasEndIntersect = props.side === 'end' || props.side === 'both';
+      const intersectMode = props.mode === 'intersect';
+      return createVNode("div", {
+        "ref": rootEl,
+        "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+          'v-infinite-scroll--start': hasStartIntersect,
+          'v-infinite-scroll--end': hasEndIntersect
+        }],
+        "style": dimensionStyles.value
+      }, [createVNode("div", {
+        "class": "v-infinite-scroll__side"
+      }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        "key": "start",
+        "side": "start",
+        "onIntersect": handleIntersect,
+        "rootRef": rootEl.value,
+        "rootMargin": margin.value
+      }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && createVNode(VInfiniteScrollIntersect, {
+        "key": "end",
+        "side": "end",
+        "onIntersect": handleIntersect,
+        "rootRef": rootEl.value,
+        "rootMargin": margin.value
+      }, null), createVNode("div", {
+        "class": "v-infinite-scroll__side"
+      }, [renderSide('end', endStatus.value)])]);
+    });
+  }
+});
+
+// Types
+
 const rootTypes = {
   actions: 'button@2',
   article: 'heading, paragraph',
@@ -20836,6 +21045,7 @@ var components = /*#__PURE__*/Object.freeze({
   VHover: VHover,
   VIcon: VIcon,
   VImg: VImg,
+  VInfiniteScroll: VInfiniteScroll,
   VInput: VInput,
   VItem: VItem,
   VItemGroup: VItemGroup,
@@ -21123,7 +21333,7 @@ function createVuetify$1() {
     date
   };
 }
-const version$1 = "4.0.0-dev-20230422.0";
+const version$1 = "4.0.0-dev-20230426.0";
 createVuetify$1.version = version$1;
 
 // Vue's inject() can only be used in setup
@@ -21135,7 +21345,7 @@ function inject(key) {
   }
 }
 
-const version = "4.0.0-dev-20230422.0";
+const version = "4.0.0-dev-20230426.0";
 
 const createVuetify = function () {
   let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};