@vuetify/nightly 3.2.0-dev-20230214.0 → 3.2.0-dev-20230322.0

package/lib/components/VPagination/index.d.ts

@@ -1,12 +1,302 @@
 import * as vue from 'vue';
-import { JSXComponent, PropType } from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, JSXComponent, PropType, ComponentPublicInstance, nextTick } from 'vue';
+
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
+}
 
 type Density = null | 'default' | 'comfortable' | 'compact';
 
 type IconValue = string | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
-declare const VPagination: vue.DefineComponent<{
+declare const VPagination: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            length: string | number;
+            start: string | number;
+            ariaLabel: string;
+            disabled: boolean;
+            size: string | number;
+            tag: string;
+            ellipsis: string;
+            rounded: string | number | boolean;
+            density: Density;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: number;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            showFirstLastPage: boolean;
+            firstIcon: IconValue;
+            lastIcon: IconValue;
+            pageAriaLabel: string;
+            currentPageAriaLabel: string;
+            firstAriaLabel: string;
+            previousAriaLabel: string;
+            nextAriaLabel: string;
+            lastAriaLabel: string;
+        }> & Omit<{
+            length: string | number;
+            start: string | number;
+            ariaLabel: string;
+            disabled: boolean;
+            size: string | number;
+            tag: string;
+            ellipsis: string;
+            density: Density;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: number;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            showFirstLastPage: boolean;
+            firstIcon: IconValue;
+            lastIcon: IconValue;
+            pageAriaLabel: string;
+            currentPageAriaLabel: string;
+            firstAriaLabel: string;
+            previousAriaLabel: string;
+            nextAriaLabel: string;
+            lastAriaLabel: string;
+        } & {
+            border?: string | number | boolean | undefined;
+            color?: string | undefined;
+            elevation?: string | number | undefined;
+            theme?: string | undefined;
+            rounded?: string | number | boolean | undefined;
+            activeColor?: string | undefined;
+            totalVisible?: string | number | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                item?: (() => vue.VNodeChild) | undefined;
+                first?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                last?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                item?: (() => vue.VNodeChild) | undefined;
+                first?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                last?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                item?: false | (() => vue.VNodeChild) | undefined;
+                first?: false | (() => vue.VNodeChild) | undefined;
+                next?: false | (() => vue.VNodeChild) | undefined;
+                prev?: false | (() => vue.VNodeChild) | undefined;
+                last?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+            onNext?: ((value: number) => any) | undefined;
+            onPrev?: ((value: number) => any) | undefined;
+            onFirst?: ((value: number) => any) | undefined;
+            onLast?: ((value: number) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "length" | "start" | "ariaLabel" | "disabled" | "size" | "tag" | "ellipsis" | "rounded" | "density" | "variant" | "modelValue" | "nextIcon" | "prevIcon" | "showFirstLastPage" | "firstIcon" | "lastIcon" | "pageAriaLabel" | "currentPageAriaLabel" | "firstAriaLabel" | "previousAriaLabel" | "nextAriaLabel" | "lastAriaLabel">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: vue.Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: ((event: "next", value: number) => void) & ((event: "prev", value: number) => void) & ((event: "first", value: number) => void) & ((event: "last", value: number) => void) & ((event: "update:modelValue", value: number) => void);
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            length: string | number;
+            start: string | number;
+            ariaLabel: string;
+            disabled: boolean;
+            size: string | number;
+            tag: string;
+            ellipsis: string;
+            density: Density;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: number;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            showFirstLastPage: boolean;
+            firstIcon: IconValue;
+            lastIcon: IconValue;
+            pageAriaLabel: string;
+            currentPageAriaLabel: string;
+            firstAriaLabel: string;
+            previousAriaLabel: string;
+            nextAriaLabel: string;
+            lastAriaLabel: string;
+        } & {
+            border?: string | number | boolean | undefined;
+            color?: string | undefined;
+            elevation?: string | number | undefined;
+            theme?: string | undefined;
+            rounded?: string | number | boolean | undefined;
+            activeColor?: string | undefined;
+            totalVisible?: string | number | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                item?: (() => vue.VNodeChild) | undefined;
+                first?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                last?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                item?: (() => vue.VNodeChild) | undefined;
+                first?: (() => vue.VNodeChild) | undefined;
+                next?: (() => vue.VNodeChild) | undefined;
+                prev?: (() => vue.VNodeChild) | undefined;
+                last?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                item?: false | (() => vue.VNodeChild) | undefined;
+                first?: false | (() => vue.VNodeChild) | undefined;
+                next?: false | (() => vue.VNodeChild) | undefined;
+                prev?: false | (() => vue.VNodeChild) | undefined;
+                last?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+            onNext?: ((value: number) => any) | undefined;
+            onPrev?: ((value: number) => any) | undefined;
+            onFirst?: ((value: number) => any) | undefined;
+            onLast?: ((value: number) => any) | undefined;
+        }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            'update:modelValue': (value: number) => true;
+            first: (value: number) => true;
+            prev: (value: number) => true;
+            next: (value: number) => true;
+            last: (value: number) => true;
+        }, string, {
+            length: string | number;
+            start: string | number;
+            ariaLabel: string;
+            disabled: boolean;
+            size: string | number;
+            tag: string;
+            ellipsis: string;
+            rounded: string | number | boolean;
+            density: Density;
+            variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+            modelValue: number;
+            nextIcon: IconValue;
+            prevIcon: IconValue;
+            showFirstLastPage: boolean;
+            firstIcon: IconValue;
+            lastIcon: IconValue;
+            pageAriaLabel: string;
+            currentPageAriaLabel: string;
+            firstAriaLabel: string;
+            previousAriaLabel: string;
+            nextAriaLabel: string;
+            lastAriaLabel: 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: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, vue.ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: 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;
+    } & {
+        length: string | number;
+        start: string | number;
+        ariaLabel: string;
+        disabled: boolean;
+        size: string | number;
+        tag: string;
+        ellipsis: string;
+        density: Density;
+        variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        modelValue: number;
+        nextIcon: IconValue;
+        prevIcon: IconValue;
+        showFirstLastPage: boolean;
+        firstIcon: IconValue;
+        lastIcon: IconValue;
+        pageAriaLabel: string;
+        currentPageAriaLabel: string;
+        firstAriaLabel: string;
+        previousAriaLabel: string;
+        nextAriaLabel: string;
+        lastAriaLabel: string;
+    } & {
+        border?: string | number | boolean | undefined;
+        color?: string | undefined;
+        elevation?: string | number | undefined;
+        theme?: string | undefined;
+        rounded?: string | number | boolean | undefined;
+        activeColor?: string | undefined;
+        totalVisible?: string | number | undefined;
+    } & {
+        $children?: {} | vue.VNodeChild | {
+            item?: (() => vue.VNodeChild) | undefined;
+            first?: (() => vue.VNodeChild) | undefined;
+            next?: (() => vue.VNodeChild) | undefined;
+            prev?: (() => vue.VNodeChild) | undefined;
+            last?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            item?: (() => vue.VNodeChild) | undefined;
+            first?: (() => vue.VNodeChild) | undefined;
+            next?: (() => vue.VNodeChild) | undefined;
+            prev?: (() => vue.VNodeChild) | undefined;
+            last?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            item?: false | (() => vue.VNodeChild) | undefined;
+            first?: false | (() => vue.VNodeChild) | undefined;
+            next?: false | (() => vue.VNodeChild) | undefined;
+            prev?: false | (() => vue.VNodeChild) | undefined;
+            last?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+        onNext?: ((value: number) => any) | undefined;
+        onPrev?: ((value: number) => any) | undefined;
+        onFirst?: ((value: number) => any) | undefined;
+        onLast?: ((value: number) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{}> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     length: string | number;
     start: string | number;
     ariaLabel: string;
@@ -44,63 +334,13 @@ declare const VPagination: vue.DefineComponent<{
         prev?: (() => vue.VNodeChild) | undefined;
         last?: (() => vue.VNodeChild) | undefined;
     };
-    'v-slots'?: {
-        item?: false | (() => vue.VNodeChild) | undefined;
-        first?: false | (() => vue.VNodeChild) | undefined;
-        next?: false | (() => vue.VNodeChild) | undefined;
-        prev?: false | (() => vue.VNodeChild) | undefined;
-        last?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:item"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:first"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:next"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:prev"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:last"?: false | (() => vue.VNodeChild) | undefined;
-}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-    'update:modelValue': (value: number) => true;
-    first: (value: number) => true;
-    prev: (value: number) => true;
-    next: (value: number) => true;
-    last: (value: number) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
-    length: string | number;
-    start: string | number;
-    ariaLabel: string;
-    disabled: boolean;
-    size: string | number;
-    tag: string;
-    ellipsis: string;
-    density: Density;
-    variant: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
-    modelValue: number;
-    nextIcon: IconValue;
-    prevIcon: IconValue;
-    showFirstLastPage: boolean;
-    firstIcon: IconValue;
-    lastIcon: IconValue;
-    pageAriaLabel: string;
-    currentPageAriaLabel: string;
-    firstAriaLabel: string;
-    previousAriaLabel: string;
-    nextAriaLabel: string;
-    lastAriaLabel: string;
-} & {
-    border?: string | number | boolean | undefined;
-    color?: string | undefined;
-    elevation?: string | number | undefined;
-    theme?: string | undefined;
-    rounded?: string | number | boolean | undefined;
-    activeColor?: string | undefined;
-    totalVisible?: string | number | undefined;
-} & {
-    $children?: {} | vue.VNodeChild | {
+    $slots?: {
         item?: (() => vue.VNodeChild) | undefined;
         first?: (() => vue.VNodeChild) | undefined;
         next?: (() => vue.VNodeChild) | undefined;
         prev?: (() => vue.VNodeChild) | undefined;
         last?: (() => vue.VNodeChild) | undefined;
-    };
+    } | undefined;
     'v-slots'?: {
         item?: false | (() => vue.VNodeChild) | undefined;
         first?: false | (() => vue.VNodeChild) | undefined;
@@ -120,7 +360,13 @@ declare const VPagination: vue.DefineComponent<{
     onPrev?: ((value: number) => any) | undefined;
     onFirst?: ((value: number) => any) | undefined;
     onLast?: ((value: number) => any) | undefined;
-}, {
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    'update:modelValue': (value: number) => true;
+    first: (value: number) => true;
+    prev: (value: number) => true;
+    next: (value: number) => true;
+    last: (value: number) => true;
+}, string, {
     length: string | number;
     start: string | number;
     ariaLabel: string;
@@ -143,7 +389,209 @@ declare const VPagination: vue.DefineComponent<{
     previousAriaLabel: string;
     nextAriaLabel: string;
     lastAriaLabel: string;
-}>;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
+        default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<Density>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    activeColor: StringConstructor;
+    start: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: (props: any) => any;
+    };
+    disabled: BooleanConstructor;
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+        validator: (val: number) => boolean;
+    };
+    totalVisible: (StringConstructor | NumberConstructor)[];
+    firstIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    prevIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    nextIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    lastIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    currentPageAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    firstAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    previousAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    lastAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    ellipsis: {
+        type: StringConstructor;
+        default: string;
+    };
+    showFirstLastPage: BooleanConstructor;
+}, vue.ExtractPropTypes<{
+    color: StringConstructor;
+    variant: Omit<{
+        type: vue.PropType<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+        default: string;
+        validator: (v: any) => boolean;
+    }, "type" | "default"> & {
+        type: vue.PropType<NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">>;
+        default: NonNullable<"flat" | "text" | "elevated" | "tonal" | "outlined" | "plain">;
+    };
+    theme: StringConstructor;
+    tag: Omit<{
+        type: StringConstructor;
+        default: string;
+    }, "type" | "default"> & {
+        type: vue.PropType<string>;
+        default: string;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    elevation: {
+        type: (StringConstructor | NumberConstructor)[];
+        validator(v: any): boolean;
+    };
+    density: {
+        type: vue.PropType<Density>;
+        default: string;
+        validator: (v: any) => boolean;
+    };
+    border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+    activeColor: StringConstructor;
+    start: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: (props: any) => any;
+    };
+    disabled: BooleanConstructor;
+    length: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+        validator: (val: number) => boolean;
+    };
+    totalVisible: (StringConstructor | NumberConstructor)[];
+    firstIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    prevIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    nextIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    lastIcon: {
+        type: vue.PropType<IconValue>;
+        default: string;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    pageAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    currentPageAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    firstAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    previousAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    nextAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    lastAriaLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    ellipsis: {
+        type: StringConstructor;
+        default: string;
+    };
+    showFirstLastPage: BooleanConstructor;
+}>>;
 type VPagination = InstanceType<typeof VPagination>;
 
 export { VPagination };

package/lib/components/VParallax/VParallax.mjs

@@ -70,9 +70,9 @@ export const VParallax = genericComponent()({
       frame = requestAnimationFrame(() => {
         const el = (root.value?.$el).querySelector('.v-img__img');
         if (!el) return;
-        const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight;
-        const scrollPos = scrollParent.scrollTop ?? window.scrollY;
-        const top = intersectionRef.value.offsetTop;
+        const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight;
+        const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop;
+        const top = intersectionRef.value.getBoundingClientRect().top + scrollPos;
         const height = contentRect.value.height;
         const center = top + (height - scrollHeight) / 2;
         const translate = floor((scrollPos - center) * scale.value);

package/lib/components/VParallax/VParallax.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VParallax.mjs","names":["VImg","useDisplay","useIntersectionObserver","useResizeObserver","clamp","genericComponent","getScrollParent","useRender","computed","onBeforeUnmount","ref","watch","watchEffect","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","clientHeight","documentElement","scrollPos","scrollTop","window","scrollY","top","offsetTop","center","translate","sizeScale","max","style","setProperty"],"sources":["../../../src/components/VParallax/VParallax.tsx"],"sourcesContent":["// Styles\nimport './VParallax.sass'\n\n// Components\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, genericComponent, getScrollParent, useRender } from '@/util'\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\n\n// Types\nimport type { VImgSlots } from '../VImg/VImg'\n\nfunction floor (val: number) {\n  return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const VParallax = genericComponent<VImgSlots>()({\n  name: 'VParallax',\n\n  props: {\n    scale: {\n      type: [Number, String],\n      default: 0.5,\n    },\n  },\n\n  setup (props, { slots }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n    const { height: displayHeight } = useDisplay()\n\n    const root = ref<VImg>()\n\n    watchEffect(() => {\n      intersectionRef.value = resizeRef.value = root.value?.$el\n    })\n\n    let scrollParent: Element\n    watch(isIntersecting, val => {\n      if (val) {\n        scrollParent = getScrollParent(intersectionRef.value)\n        scrollParent = scrollParent === document.scrollingElement ? document as any : scrollParent\n        scrollParent.addEventListener('scroll', onScroll, { passive: true })\n        onScroll()\n      } else {\n        scrollParent.removeEventListener('scroll', onScroll)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      scrollParent?.removeEventListener('scroll', onScroll)\n    })\n\n    watch(displayHeight, onScroll)\n    watch(() => contentRect.value?.height, onScroll)\n\n    const scale = computed(() => {\n      return 1 - clamp(+props.scale)\n    })\n\n    let frame = -1\n    function onScroll () {\n      if (!isIntersecting.value) return\n\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img')\n        if (!el) return\n\n        const scrollHeight = scrollParent.clientHeight ?? document.documentElement.clientHeight\n        const scrollPos = scrollParent.scrollTop ?? window.scrollY\n        const top = intersectionRef.value!.offsetTop\n        const height = contentRect.value!.height\n\n        const center = top + (height - scrollHeight) / 2\n        const translate = floor((scrollPos - center) * scale.value)\n        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height)\n\n        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`)\n      })\n    }\n\n    useRender(() => (\n      <VImg\n        class={[\n          'v-parallax',\n          { 'v-parallax--active': isIntersecting.value },\n        ]}\n        ref={ root }\n        cover\n        onLoadstart={ onScroll }\n        onLoad={ onScroll }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"mappings":"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"}
+{"version":3,"file":"VParallax.mjs","names":["VImg","useDisplay","useIntersectionObserver","useResizeObserver","clamp","genericComponent","getScrollParent","useRender","computed","onBeforeUnmount","ref","watch","watchEffect","floor","val","Math","abs","sign","VParallax","name","props","scale","type","Number","String","default","setup","slots","intersectionRef","isIntersecting","resizeRef","contentRect","height","displayHeight","root","value","$el","scrollParent","document","scrollingElement","addEventListener","onScroll","passive","removeEventListener","frame","cancelAnimationFrame","requestAnimationFrame","el","querySelector","scrollHeight","Document","documentElement","clientHeight","scrollPos","window","scrollY","scrollTop","top","getBoundingClientRect","center","translate","sizeScale","max","style","setProperty"],"sources":["../../../src/components/VParallax/VParallax.tsx"],"sourcesContent":["// Styles\nimport './VParallax.sass'\n\n// Components\nimport { VImg } from '@/components/VImg'\n\n// Composables\nimport { useDisplay } from '@/composables'\nimport { useIntersectionObserver } from '@/composables/intersectionObserver'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { clamp, genericComponent, getScrollParent, useRender } from '@/util'\nimport { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue'\n\n// Types\nimport type { VImgSlots } from '../VImg/VImg'\n\nfunction floor (val: number) {\n  return Math.floor(Math.abs(val)) * Math.sign(val)\n}\n\nexport const VParallax = genericComponent<VImgSlots>()({\n  name: 'VParallax',\n\n  props: {\n    scale: {\n      type: [Number, String],\n      default: 0.5,\n    },\n  },\n\n  setup (props, { slots }) {\n    const { intersectionRef, isIntersecting } = useIntersectionObserver()\n    const { resizeRef, contentRect } = useResizeObserver()\n    const { height: displayHeight } = useDisplay()\n\n    const root = ref<VImg>()\n\n    watchEffect(() => {\n      intersectionRef.value = resizeRef.value = root.value?.$el\n    })\n\n    let scrollParent: Element | Document\n    watch(isIntersecting, val => {\n      if (val) {\n        scrollParent = getScrollParent(intersectionRef.value)\n        scrollParent = scrollParent === document.scrollingElement ? document : scrollParent\n        scrollParent.addEventListener('scroll', onScroll, { passive: true })\n        onScroll()\n      } else {\n        scrollParent.removeEventListener('scroll', onScroll)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      scrollParent?.removeEventListener('scroll', onScroll)\n    })\n\n    watch(displayHeight, onScroll)\n    watch(() => contentRect.value?.height, onScroll)\n\n    const scale = computed(() => {\n      return 1 - clamp(+props.scale)\n    })\n\n    let frame = -1\n    function onScroll () {\n      if (!isIntersecting.value) return\n\n      cancelAnimationFrame(frame)\n      frame = requestAnimationFrame(() => {\n        const el: HTMLElement | null = (root.value?.$el as Element).querySelector('.v-img__img')\n        if (!el) return\n\n        const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight\n        const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop\n        const top = intersectionRef.value!.getBoundingClientRect().top + scrollPos\n        const height = contentRect.value!.height\n\n        const center = top + (height - scrollHeight) / 2\n        const translate = floor((scrollPos - center) * scale.value)\n        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height)\n\n        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`)\n      })\n    }\n\n    useRender(() => (\n      <VImg\n        class={[\n          'v-parallax',\n          { 'v-parallax--active': isIntersecting.value },\n        ]}\n        ref={ root }\n        cover\n        onLoadstart={ onScroll }\n        onLoad={ onScroll }\n        v-slots={ slots }\n      />\n    ))\n\n    return {}\n  },\n})\n\nexport type VParallax = InstanceType<typeof VParallax>\n"],"mappings":"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"}