@vuetify/nightly 4.0.0-dev-20230511.0 → 4.0.0-dev-20230512.0

package/lib/components/VValidation/VValidation.mjs

@@ -3,9 +3,7 @@ import { makeValidationProps, useValidation } from "../../composables/validation
 import { genericComponent } from "../../util/index.mjs";
 export const VValidation = genericComponent()({
   name: 'VValidation',
-  props: {
-    ...makeValidationProps()
-  },
+  props: makeValidationProps(),
   emits: {
     'update:modelValue': val => true
   },

package/lib/components/VValidation/VValidation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VValidation.mjs","names":["makeValidationProps","useValidation","genericComponent","VValidation","name","props","emits","val","setup","_ref","slots","validation","default"],"sources":["../../../src/components/VValidation/VValidation.tsx"],"sourcesContent":["// Composables\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { genericComponent } from '@/util'\n\nexport const VValidation = genericComponent()({\n  name: 'VValidation',\n\n  props: {\n    ...makeValidationProps(),\n  },\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const validation = useValidation(props, 'validation')\n\n    return () => slots.default?.(validation)\n  },\n})\n\nexport type VValidation = InstanceType<typeof VValidation>\n"],"mappings":"AAAA;AAAA,SACSA,mBAAmB,EAAEC,aAAa,4CAE3C;AAAA,SACSC,gBAAgB;AAEzB,OAAO,MAAMC,WAAW,GAAGD,gBAAgB,EAAE,CAAC;EAC5CE,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAE;IACL,GAAGL,mBAAmB;EACxB,CAAC;EAEDM,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAQ,IAAK;EACrC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,UAAU,GAAGV,aAAa,CAACI,KAAK,EAAE,YAAY,CAAC;IAErD,OAAO,MAAMK,KAAK,CAACE,OAAO,GAAGD,UAAU,CAAC;EAC1C;AACF,CAAC,CAAC"}
+{"version":3,"file":"VValidation.mjs","names":["makeValidationProps","useValidation","genericComponent","VValidation","name","props","emits","val","setup","_ref","slots","validation","default"],"sources":["../../../src/components/VValidation/VValidation.tsx"],"sourcesContent":["// Composables\nimport { makeValidationProps, useValidation } from '@/composables/validation'\n\n// Utilities\nimport { genericComponent } from '@/util'\n\nexport type VValidationSlots = {\n  default: [ReturnType<typeof useValidation>]\n}\n\nexport const VValidation = genericComponent<VValidationSlots>()({\n  name: 'VValidation',\n\n  props: makeValidationProps(),\n\n  emits: {\n    'update:modelValue': (val: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const validation = useValidation(props, 'validation')\n\n    return () => slots.default?.(validation)\n  },\n})\n\nexport type VValidation = InstanceType<typeof VValidation>\n"],"mappings":"AAAA;AAAA,SACSA,mBAAmB,EAAEC,aAAa,4CAE3C;AAAA,SACSC,gBAAgB;AAMzB,OAAO,MAAMC,WAAW,GAAGD,gBAAgB,EAAoB,CAAC;EAC9DE,IAAI,EAAE,aAAa;EAEnBC,KAAK,EAAEL,mBAAmB,EAAE;EAE5BM,KAAK,EAAE;IACL,mBAAmB,EAAGC,GAAQ,IAAK;EACrC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAME,UAAU,GAAGV,aAAa,CAACI,KAAK,EAAE,YAAY,CAAC;IAErD,OAAO,MAAMK,KAAK,CAACE,OAAO,GAAGD,UAAU,CAAC;EAC1C;AACF,CAAC,CAAC"}

package/lib/components/VValidation/index.d.mts

@@ -15,41 +15,129 @@ declare const VValidation: {
     new (...args: any[]): {
         $: vue.ComponentInternalInstance;
         $data: {};
-        $props: Partial<{
-            error: boolean;
-            disabled: boolean;
-            readonly: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-        }> & Omit<{
-            error: boolean;
-            disabled: boolean;
-            readonly: boolean;
-            focused: boolean;
-            errorMessages: string | string[];
-            maxErrors: string | number;
-            rules: ValidationRule[];
-        } & {
+        $props: {
+            error?: boolean | undefined;
+            disabled?: boolean | undefined;
+            readonly?: boolean | undefined;
+            focused?: boolean | undefined;
+            errorMessages?: string | string[] | undefined;
+            maxErrors?: string | number | undefined;
+            rules?: ValidationRule[] | undefined;
+            key?: string | number | symbol | undefined;
             name?: string | undefined;
             label?: string | undefined;
+            style?: unknown;
+            class?: unknown;
+            $children?: vue.VNodeChild | {
+                default?: ((args_0: {
+                    errorMessages: vue.ComputedRef<string[]>;
+                    isDirty: vue.ComputedRef<boolean>;
+                    isDisabled: vue.ComputedRef<boolean>;
+                    isReadonly: vue.ComputedRef<boolean>;
+                    isPristine: vue.ShallowRef<boolean>;
+                    isValid: vue.ComputedRef<boolean | null>;
+                    isValidating: vue.ShallowRef<boolean>;
+                    reset: () => void;
+                    resetValidation: () => void;
+                    validate: () => Promise<string[]>;
+                    validationClasses: vue.ComputedRef<{
+                        [x: string]: boolean;
+                    }>;
+                }) => vue.VNodeChild) | undefined;
+            } | ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild);
+            ref?: vue.VNodeRef | undefined;
+            ref_for?: boolean | undefined;
+            ref_key?: string | undefined;
+            "v-slot:default"?: false | ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild) | undefined;
+            'v-slots'?: {
+                default?: false | ((args_0: {
+                    errorMessages: vue.ComputedRef<string[]>;
+                    isDirty: vue.ComputedRef<boolean>;
+                    isDisabled: vue.ComputedRef<boolean>;
+                    isReadonly: vue.ComputedRef<boolean>;
+                    isPristine: vue.ShallowRef<boolean>;
+                    isValid: vue.ComputedRef<boolean | null>;
+                    isValidating: vue.ShallowRef<boolean>;
+                    reset: () => void;
+                    resetValidation: () => void;
+                    validate: () => Promise<string[]>;
+                    validationClasses: vue.ComputedRef<{
+                        [x: string]: boolean;
+                    }>;
+                }) => vue.VNodeChild) | undefined;
+            } | undefined;
+            onVnodeBeforeMount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeMounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUpdate?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUpdated?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>, oldVNode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeBeforeUnmount?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
+            onVnodeUnmounted?: ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void) | ((vnode: vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>) => void)[] | undefined;
             modelValue?: any;
+            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
             'onUpdate:focused'?: EventProp<[boolean], (args_0: boolean) => any> | undefined;
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
-        } & {
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
-            };
-            'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
-            } | undefined;
-        } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & {
-            "onUpdate:modelValue"?: ((val: any) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "error" | "disabled" | "readonly" | "focused" | "errorMessages" | "maxErrors" | "rules">;
+        };
         $attrs: {
             [x: string]: unknown;
         };
@@ -57,10 +145,26 @@ declare const VValidation: {
             [x: string]: unknown;
         };
         $slots: Readonly<{
-            [name: string]: vue.Slot | undefined;
+            default?: ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[]) | 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;
+        $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: "update:modelValue", val: any) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
@@ -79,14 +183,70 @@ declare const VValidation: {
             validateOn?: "input" | "blur" | "submit" | undefined;
             validationValue?: any;
         } & {
-            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-                default?: (() => vue.VNodeChild) | undefined;
-            };
+            $children?: vue.VNodeChild | {
+                default?: ((args_0: {
+                    errorMessages: vue.ComputedRef<string[]>;
+                    isDirty: vue.ComputedRef<boolean>;
+                    isDisabled: vue.ComputedRef<boolean>;
+                    isReadonly: vue.ComputedRef<boolean>;
+                    isPristine: vue.ShallowRef<boolean>;
+                    isValid: vue.ComputedRef<boolean | null>;
+                    isValidating: vue.ShallowRef<boolean>;
+                    reset: () => void;
+                    resetValidation: () => void;
+                    validate: () => Promise<string[]>;
+                    validationClasses: vue.ComputedRef<{
+                        [x: string]: boolean;
+                    }>;
+                }) => vue.VNodeChild) | undefined;
+            } | ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild);
             'v-slots'?: {
-                default?: false | (() => vue.VNodeChild) | undefined;
+                default?: false | ((args_0: {
+                    errorMessages: vue.ComputedRef<string[]>;
+                    isDirty: vue.ComputedRef<boolean>;
+                    isDisabled: vue.ComputedRef<boolean>;
+                    isReadonly: vue.ComputedRef<boolean>;
+                    isPristine: vue.ShallowRef<boolean>;
+                    isValid: vue.ComputedRef<boolean | null>;
+                    isValidating: vue.ShallowRef<boolean>;
+                    reset: () => void;
+                    resetValidation: () => void;
+                    validate: () => Promise<string[]>;
+                    validationClasses: vue.ComputedRef<{
+                        [x: string]: boolean;
+                    }>;
+                }) => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
-            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:default"?: false | ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild) | undefined;
         } & {
             "onUpdate:modelValue"?: ((val: any) => any) | undefined;
         }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -101,7 +261,25 @@ declare const VValidation: {
             errorMessages: string | string[];
             maxErrors: string | number;
             rules: ValidationRule[];
-        }, {}, string> & {
+        }, {}, string, vue.SlotsType<Partial<{
+            default: (args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+                [key: string]: any;
+            }>[];
+        }>>> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -116,7 +294,7 @@ declare const VValidation: {
             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;
+            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 vue.nextTick;
@@ -137,14 +315,70 @@ declare const VValidation: {
         validateOn?: "input" | "blur" | "submit" | undefined;
         validationValue?: any;
     } & {
-        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-            default?: (() => vue.VNodeChild) | undefined;
-        };
+        $children?: vue.VNodeChild | {
+            default?: ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild) | undefined;
+        } | ((args_0: {
+            errorMessages: vue.ComputedRef<string[]>;
+            isDirty: vue.ComputedRef<boolean>;
+            isDisabled: vue.ComputedRef<boolean>;
+            isReadonly: vue.ComputedRef<boolean>;
+            isPristine: vue.ShallowRef<boolean>;
+            isValid: vue.ComputedRef<boolean | null>;
+            isValidating: vue.ShallowRef<boolean>;
+            reset: () => void;
+            resetValidation: () => void;
+            validate: () => Promise<string[]>;
+            validationClasses: vue.ComputedRef<{
+                [x: string]: boolean;
+            }>;
+        }) => vue.VNodeChild);
         'v-slots'?: {
-            default?: false | (() => vue.VNodeChild) | undefined;
+            default?: false | ((args_0: {
+                errorMessages: vue.ComputedRef<string[]>;
+                isDirty: vue.ComputedRef<boolean>;
+                isDisabled: vue.ComputedRef<boolean>;
+                isReadonly: vue.ComputedRef<boolean>;
+                isPristine: vue.ShallowRef<boolean>;
+                isValid: vue.ComputedRef<boolean | null>;
+                isValidating: vue.ShallowRef<boolean>;
+                reset: () => void;
+                resetValidation: () => void;
+                validate: () => Promise<string[]>;
+                validationClasses: vue.ComputedRef<{
+                    [x: string]: boolean;
+                }>;
+            }) => vue.VNodeChild) | undefined;
         } | undefined;
     } & {
-        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:default"?: false | ((args_0: {
+            errorMessages: vue.ComputedRef<string[]>;
+            isDirty: vue.ComputedRef<boolean>;
+            isDisabled: vue.ComputedRef<boolean>;
+            isReadonly: vue.ComputedRef<boolean>;
+            isPristine: vue.ShallowRef<boolean>;
+            isValid: vue.ComputedRef<boolean | null>;
+            isValidating: vue.ShallowRef<boolean>;
+            reset: () => void;
+            resetValidation: () => void;
+            validate: () => Promise<string[]>;
+            validationClasses: vue.ComputedRef<{
+                [x: string]: boolean;
+            }>;
+        }) => vue.VNodeChild) | undefined;
     } & {
         "onUpdate:modelValue"?: ((val: any) => any) | undefined;
     } & vue.ShallowUnwrapRef<() => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -169,14 +403,70 @@ declare const VValidation: {
     validateOn?: "input" | "blur" | "submit" | undefined;
     validationValue?: any;
 } & {
-    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
-        default?: (() => vue.VNodeChild) | undefined;
-    };
+    $children?: vue.VNodeChild | {
+        default?: ((args_0: {
+            errorMessages: vue.ComputedRef<string[]>;
+            isDirty: vue.ComputedRef<boolean>;
+            isDisabled: vue.ComputedRef<boolean>;
+            isReadonly: vue.ComputedRef<boolean>;
+            isPristine: vue.ShallowRef<boolean>;
+            isValid: vue.ComputedRef<boolean | null>;
+            isValidating: vue.ShallowRef<boolean>;
+            reset: () => void;
+            resetValidation: () => void;
+            validate: () => Promise<string[]>;
+            validationClasses: vue.ComputedRef<{
+                [x: string]: boolean;
+            }>;
+        }) => vue.VNodeChild) | undefined;
+    } | ((args_0: {
+        errorMessages: vue.ComputedRef<string[]>;
+        isDirty: vue.ComputedRef<boolean>;
+        isDisabled: vue.ComputedRef<boolean>;
+        isReadonly: vue.ComputedRef<boolean>;
+        isPristine: vue.ShallowRef<boolean>;
+        isValid: vue.ComputedRef<boolean | null>;
+        isValidating: vue.ShallowRef<boolean>;
+        reset: () => void;
+        resetValidation: () => void;
+        validate: () => Promise<string[]>;
+        validationClasses: vue.ComputedRef<{
+            [x: string]: boolean;
+        }>;
+    }) => vue.VNodeChild);
     'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
+        default?: false | ((args_0: {
+            errorMessages: vue.ComputedRef<string[]>;
+            isDirty: vue.ComputedRef<boolean>;
+            isDisabled: vue.ComputedRef<boolean>;
+            isReadonly: vue.ComputedRef<boolean>;
+            isPristine: vue.ShallowRef<boolean>;
+            isValid: vue.ComputedRef<boolean | null>;
+            isValidating: vue.ShallowRef<boolean>;
+            reset: () => void;
+            resetValidation: () => void;
+            validate: () => Promise<string[]>;
+            validationClasses: vue.ComputedRef<{
+                [x: string]: boolean;
+            }>;
+        }) => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:default"?: false | ((args_0: {
+        errorMessages: vue.ComputedRef<string[]>;
+        isDirty: vue.ComputedRef<boolean>;
+        isDisabled: vue.ComputedRef<boolean>;
+        isReadonly: vue.ComputedRef<boolean>;
+        isPristine: vue.ShallowRef<boolean>;
+        isValid: vue.ComputedRef<boolean | null>;
+        isValidating: vue.ShallowRef<boolean>;
+        reset: () => void;
+        resetValidation: () => void;
+        validate: () => Promise<string[]>;
+        validationClasses: vue.ComputedRef<{
+            [x: string]: boolean;
+        }>;
+    }) => vue.VNodeChild) | undefined;
 } & {
     "onUpdate:modelValue"?: ((val: any) => any) | undefined;
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -191,7 +481,25 @@ declare const VValidation: {
     errorMessages: string | string[];
     maxErrors: string | number;
     rules: ValidationRule[];
-}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+}, {}, string, vue.SlotsType<Partial<{
+    default: (args_0: {
+        errorMessages: vue.ComputedRef<string[]>;
+        isDirty: vue.ComputedRef<boolean>;
+        isDisabled: vue.ComputedRef<boolean>;
+        isReadonly: vue.ComputedRef<boolean>;
+        isPristine: vue.ShallowRef<boolean>;
+        isValid: vue.ComputedRef<boolean | null>;
+        isValidating: vue.ShallowRef<boolean>;
+        reset: () => void;
+        resetValidation: () => void;
+        validate: () => Promise<string[]>;
+        validationClasses: vue.ComputedRef<{
+            [x: string]: boolean;
+        }>;
+    }) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
     focused: BooleanConstructor;
     'onUpdate:focused': vue.PropType<EventProp<[boolean], (args_0: boolean) => any>>;
     disabled: BooleanConstructor;

package/lib/components/VVirtualScroll/VVirtualScroll.mjs

@@ -8,27 +8,28 @@ import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { useDisplay } from "../../composables/display.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
-import { computed, onMounted, ref, watch, watchEffect } from 'vue';
-import { clamp, convertToUnit, createRange, genericComponent, useRender } from "../../util/index.mjs"; // Types
+import { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue';
+import { clamp, convertToUnit, createRange, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
 const UP = -1;
 const DOWN = 1;
+export const makeVVirtualScrollProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemHeight: [Number, String],
+  ...makeComponentProps(),
+  ...makeDimensionProps()
+}, 'v-virtual-scroll');
 export const VVirtualScroll = genericComponent()({
   name: 'VVirtualScroll',
-  props: {
-    items: {
-      type: Array,
-      default: () => []
-    },
-    itemHeight: [Number, String],
-    ...makeComponentProps(),
-    ...makeDimensionProps()
-  },
+  props: makeVVirtualScrollProps(),
   setup(props, _ref) {
     let {
       slots
     } = _ref;
-    const first = ref(0);
-    const baseItemHeight = ref(props.itemHeight);
+    const first = shallowRef(0);
+    const baseItemHeight = shallowRef(props.itemHeight);
     const itemHeight = computed({
       get: () => parseInt(baseItemHeight.value ?? 0, 10),
       set(val) {

package/lib/components/VVirtualScroll/VVirtualScroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useDisplay","useResizeObserver","computed","onMounted","ref","watch","watchEffect","clamp","convertToUnit","createRange","genericComponent","useRender","UP","DOWN","VVirtualScroll","name","props","items","type","Array","default","itemHeight","Number","String","setup","_ref","slots","first","baseItemHeight","get","parseInt","value","set","val","rootEl","resizeRef","contentRect","display","sizeMap","Map","sizes","length","map","visibleItems","Math","max","ceil","height","handleItemResize","index","calculateOffset","slice","reduce","curr","calculateMidPointIndex","scrollTop","end","middle","middleOffset","lastScrollTop","handleScroll","direction","midPointIndex","buffer","round","scrollToIndex","offset","item","raw","last","min","computedItems","paddingTop","paddingBottom","dimensionStyles","forEach","indexOf","delete","_createVNode","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, watch, watchEffect } from 'vue'\nimport {\n  clamp,\n  convertToUnit,\n  createRange,\n  genericComponent,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { GenericProps } from '@/util'\n\nconst UP = -1\nconst DOWN = 1\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const VVirtualScroll = genericComponent<new <T>(props: {\n  items?: readonly T[]\n}) => GenericProps<typeof props, {\n  default: [VVirtualScrollSlot<T>]\n}>>()({\n  name: 'VVirtualScroll',\n\n  props: {\n    items: {\n      type: Array,\n      default: () => ([]),\n    },\n    itemHeight: [Number, String],\n\n    ...makeComponentProps(),\n    ...makeDimensionProps(),\n  },\n\n  setup (props, { slots }) {\n    const first = ref(0)\n    const baseItemHeight = ref(props.itemHeight)\n    const itemHeight = computed({\n      get: () => parseInt(baseItemHeight.value ?? 0, 10),\n      set (val) {\n        baseItemHeight.value = val\n      },\n    })\n    const rootEl = ref<HTMLDivElement>()\n    const { resizeRef, contentRect } = useResizeObserver()\n    watchEffect(() => {\n      resizeRef.value = rootEl.value\n    })\n    const display = useDisplay()\n\n    const sizeMap = new Map<any, number>()\n    let sizes = createRange(props.items.length).map(() => itemHeight.value)\n    const visibleItems = computed(() => {\n      return Math.max(12,\n        Math.ceil(((contentRect.value?.height ?? display.height.value) / itemHeight.value) * 1.7 + 1)\n      )\n    })\n\n    function handleItemResize (index: number, height: number) {\n      itemHeight.value = Math.max(itemHeight.value, height)\n      sizes[index] = height\n      sizeMap.set(props.items[index], height)\n    }\n\n    function calculateOffset (index: number) {\n      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0)\n    }\n\n    function calculateMidPointIndex (scrollTop: number) {\n      const end = props.items.length\n\n      let middle = 0\n      let middleOffset = 0\n      while (middleOffset < scrollTop && middle < end) {\n        middleOffset += sizes[middle++] || itemHeight.value\n      }\n\n      return middle - 1\n    }\n\n    let lastScrollTop = 0\n    function handleScroll () {\n      if (!rootEl.value || !contentRect.value) return\n\n      const height = contentRect.value.height\n      const scrollTop = rootEl.value.scrollTop\n      const direction = scrollTop < lastScrollTop ? UP : DOWN\n\n      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2)\n      const buffer = Math.round(visibleItems.value / 3)\n      if (direction === UP && midPointIndex <= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length)\n      } else if (direction === DOWN && midPointIndex >= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value)\n      }\n\n      lastScrollTop = rootEl.value.scrollTop\n    }\n\n    function scrollToIndex (index: number) {\n      if (!rootEl.value) return\n\n      const offset = calculateOffset(index)\n      rootEl.value.scrollTop = offset\n    }\n\n    const items = computed(() => props.items.map((item, index) => ({\n      raw: item,\n      index,\n    })))\n    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value))\n    const computedItems = computed(() => items.value.slice(first.value, last.value))\n    const paddingTop = computed(() => calculateOffset(first.value))\n    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value))\n\n    const { dimensionStyles } = useDimension(props)\n\n    onMounted(() => {\n      if (!itemHeight.value) {\n        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items\n        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / (visibleItems.value)\n      }\n    })\n\n    watch(() => props.items.length, () => {\n      sizes = createRange(props.items.length).map(() => itemHeight.value)\n      sizeMap.forEach((height, item) => {\n        const index = props.items.indexOf(item)\n        if (index === -1) {\n          sizeMap.delete(item)\n        } else {\n          sizes[index] = height\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        ref={ rootEl }\n        class={[\n          'v-virtual-scroll',\n          props.class,\n        ]}\n        onScroll={ handleScroll }\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div\n          class=\"v-virtual-scroll__container\"\n          style={{\n            paddingTop: convertToUnit(paddingTop.value),\n            paddingBottom: convertToUnit(paddingBottom.value),\n          }}\n        >\n          { computedItems.value.map(item => (\n            <VVirtualScrollItem\n              key={ item.index }\n              dynamicHeight={ !props.itemHeight }\n              onUpdate:height={ height => handleItemResize(item.index, height) }\n            >\n              { slots.default?.({ item: item.raw, index: item.index }) }\n            </VVirtualScrollItem>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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"}
+{"version":3,"file":"VVirtualScroll.mjs","names":["VVirtualScrollItem","makeComponentProps","makeDimensionProps","useDimension","useDisplay","useResizeObserver","computed","onMounted","ref","shallowRef","watch","watchEffect","clamp","convertToUnit","createRange","genericComponent","propsFactory","useRender","UP","DOWN","makeVVirtualScrollProps","items","type","Array","default","itemHeight","Number","String","VVirtualScroll","name","props","setup","_ref","slots","first","baseItemHeight","get","parseInt","value","set","val","rootEl","resizeRef","contentRect","display","sizeMap","Map","sizes","length","map","visibleItems","Math","max","ceil","height","handleItemResize","index","calculateOffset","slice","reduce","curr","calculateMidPointIndex","scrollTop","end","middle","middleOffset","lastScrollTop","handleScroll","direction","midPointIndex","buffer","round","scrollToIndex","offset","item","raw","last","min","computedItems","paddingTop","paddingBottom","dimensionStyles","forEach","indexOf","delete","_createVNode","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScroll.tsx"],"sourcesContent":["// Styles\nimport './VVirtualScroll.sass'\n\n// Components\nimport { VVirtualScrollItem } from './VVirtualScrollItem'\n\n// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { useDisplay } from '@/composables/display'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'\nimport {\n  clamp,\n  convertToUnit,\n  createRange,\n  genericComponent,\n  propsFactory,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { GenericProps } from '@/util'\n\nconst UP = -1\nconst DOWN = 1\n\nexport interface VVirtualScrollSlot<T> {\n  item: T\n  index: number\n}\n\nexport const makeVVirtualScrollProps = propsFactory({\n  items: {\n    type: Array,\n    default: () => ([]),\n  },\n  itemHeight: [Number, String],\n\n  ...makeComponentProps(),\n  ...makeDimensionProps(),\n}, 'v-virtual-scroll')\n\nexport const VVirtualScroll = genericComponent<new <T>(\n  props: {\n    items?: readonly T[]\n  },\n  slots: {\n    default: [VVirtualScrollSlot<T>]\n  }\n) => GenericProps<typeof props, typeof slots>>()({\n  name: 'VVirtualScroll',\n\n  props: makeVVirtualScrollProps(),\n\n  setup (props, { slots }) {\n    const first = shallowRef(0)\n    const baseItemHeight = shallowRef(props.itemHeight)\n    const itemHeight = computed({\n      get: () => parseInt(baseItemHeight.value ?? 0, 10),\n      set (val) {\n        baseItemHeight.value = val\n      },\n    })\n    const rootEl = ref<HTMLDivElement>()\n    const { resizeRef, contentRect } = useResizeObserver()\n    watchEffect(() => {\n      resizeRef.value = rootEl.value\n    })\n    const display = useDisplay()\n\n    const sizeMap = new Map<any, number>()\n    let sizes = createRange(props.items.length).map(() => itemHeight.value)\n    const visibleItems = computed(() => {\n      return Math.max(12,\n        Math.ceil(((contentRect.value?.height ?? display.height.value) / itemHeight.value) * 1.7 + 1)\n      )\n    })\n\n    function handleItemResize (index: number, height: number) {\n      itemHeight.value = Math.max(itemHeight.value, height)\n      sizes[index] = height\n      sizeMap.set(props.items[index], height)\n    }\n\n    function calculateOffset (index: number) {\n      return sizes.slice(0, index).reduce((curr, value) => curr + (value || itemHeight.value), 0)\n    }\n\n    function calculateMidPointIndex (scrollTop: number) {\n      const end = props.items.length\n\n      let middle = 0\n      let middleOffset = 0\n      while (middleOffset < scrollTop && middle < end) {\n        middleOffset += sizes[middle++] || itemHeight.value\n      }\n\n      return middle - 1\n    }\n\n    let lastScrollTop = 0\n    function handleScroll () {\n      if (!rootEl.value || !contentRect.value) return\n\n      const height = contentRect.value.height\n      const scrollTop = rootEl.value.scrollTop\n      const direction = scrollTop < lastScrollTop ? UP : DOWN\n\n      const midPointIndex = calculateMidPointIndex(scrollTop + height / 2)\n      const buffer = Math.round(visibleItems.value / 3)\n      if (direction === UP && midPointIndex <= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length)\n      } else if (direction === DOWN && midPointIndex >= first.value + (buffer * 2) - 1) {\n        first.value = clamp(midPointIndex - buffer, 0, props.items.length - visibleItems.value)\n      }\n\n      lastScrollTop = rootEl.value.scrollTop\n    }\n\n    function scrollToIndex (index: number) {\n      if (!rootEl.value) return\n\n      const offset = calculateOffset(index)\n      rootEl.value.scrollTop = offset\n    }\n\n    const items = computed(() => props.items.map((item, index) => ({\n      raw: item,\n      index,\n    })))\n    const last = computed(() => Math.min(props.items.length, first.value + visibleItems.value))\n    const computedItems = computed(() => items.value.slice(first.value, last.value))\n    const paddingTop = computed(() => calculateOffset(first.value))\n    const paddingBottom = computed(() => calculateOffset(props.items.length) - calculateOffset(last.value))\n\n    const { dimensionStyles } = useDimension(props)\n\n    onMounted(() => {\n      if (!itemHeight.value) {\n        // If itemHeight prop is not set, then calculate an estimated height from the average of inital items\n        itemHeight.value = sizes.slice(first.value, last.value).reduce((curr, height) => curr + height, 0) / (visibleItems.value)\n      }\n    })\n\n    watch(() => props.items.length, () => {\n      sizes = createRange(props.items.length).map(() => itemHeight.value)\n      sizeMap.forEach((height, item) => {\n        const index = props.items.indexOf(item)\n        if (index === -1) {\n          sizeMap.delete(item)\n        } else {\n          sizes[index] = height\n        }\n      })\n    })\n\n    useRender(() => (\n      <div\n        ref={ rootEl }\n        class={[\n          'v-virtual-scroll',\n          props.class,\n        ]}\n        onScroll={ handleScroll }\n        style={[\n          dimensionStyles.value,\n          props.style,\n        ]}\n      >\n        <div\n          class=\"v-virtual-scroll__container\"\n          style={{\n            paddingTop: convertToUnit(paddingTop.value),\n            paddingBottom: convertToUnit(paddingBottom.value),\n          }}\n        >\n          { computedItems.value.map(item => (\n            <VVirtualScrollItem\n              key={ item.index }\n              dynamicHeight={ !props.itemHeight }\n              onUpdate:height={ height => handleItemResize(item.index, height) }\n            >\n              { slots.default?.({ item: item.raw, index: item.index }) }\n            </VVirtualScrollItem>\n          ))}\n        </div>\n      </div>\n    ))\n\n    return {\n      scrollToIndex,\n    }\n  },\n})\n\nexport type VVirtualScroll = InstanceType<typeof VVirtualScroll>\n"],"mappings":"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"}

package/lib/components/VVirtualScroll/VVirtualScrollItem.mjs

@@ -3,14 +3,15 @@ import { createVNode as _createVNode } from "vue";
 import { makeComponentProps } from "../../composables/component.mjs";
 import { useResizeObserver } from "../../composables/resizeObserver.mjs";
 import { useToggleScope } from "../../composables/toggleScope.mjs"; // Utilities
-import { genericComponent, useRender } from "../../util/index.mjs";
+import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
 import { onUpdated, watch } from 'vue';
+export const makeVVirtualScrollItemProps = propsFactory({
+  dynamicHeight: Boolean,
+  ...makeComponentProps()
+}, 'v-virtual-scroll-item');
 export const VVirtualScrollItem = genericComponent()({
   name: 'VVirtualScrollItem',
-  props: {
-    dynamicHeight: Boolean,
-    ...makeComponentProps()
-  },
+  props: makeVVirtualScrollItemProps(),
   emits: {
     'update:height': height => true
   },

package/lib/components/VVirtualScroll/VVirtualScrollItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VVirtualScrollItem.mjs","names":["makeComponentProps","useResizeObserver","useToggleScope","genericComponent","useRender","onUpdated","watch","VVirtualScrollItem","name","props","dynamicHeight","Boolean","emits","height","setup","_ref","emit","slots","resizeRef","contentRect","value","updateHeight","_createVNode","undefined","class","style","default"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { genericComponent, useRender } from '@/util'\nimport { onUpdated, watch } from 'vue'\n\nexport const VVirtualScrollItem = genericComponent()({\n  name: 'VVirtualScrollItem',\n\n  props: {\n    dynamicHeight: Boolean,\n\n    ...makeComponentProps(),\n  },\n\n  emits: {\n    'update:height': (height: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    useToggleScope(() => props.dynamicHeight, () => {\n      watch(() => contentRect.value?.height, height => {\n        if (height != null) emit('update:height', height)\n      })\n    })\n\n    function updateHeight () {\n      if (props.dynamicHeight && contentRect.value) {\n        emit('update:height', contentRect.value.height)\n      }\n    }\n\n    onUpdated(updateHeight)\n\n    useRender(() => (\n      <div\n        ref={ props.dynamicHeight ? resizeRef : undefined }\n        class={[\n          'v-virtual-scroll__item',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB;AAAA,SACjBC,cAAc,6CAEvB;AAAA,SACSC,gBAAgB,EAAEC,SAAS;AACpC,SAASC,SAAS,EAAEC,KAAK,QAAQ,KAAK;AAEtC,OAAO,MAAMC,kBAAkB,GAAGJ,gBAAgB,EAAE,CAAC;EACnDK,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAE;IACLC,aAAa,EAAEC,OAAO;IAEtB,GAAGX,kBAAkB;EACvB,CAAC;EAEDY,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEL,KAAK,EAAAM,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,SAAS;MAAEC;IAAY,CAAC,GAAGlB,iBAAiB,EAAE;IAEtDC,cAAc,CAAC,MAAMO,KAAK,CAACC,aAAa,EAAE,MAAM;MAC9CJ,KAAK,CAAC,MAAMa,WAAW,CAACC,KAAK,EAAEP,MAAM,EAAEA,MAAM,IAAI;QAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEG,IAAI,CAAC,eAAe,EAAEH,MAAM,CAAC;MACnD,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASQ,YAAYA,CAAA,EAAI;MACvB,IAAIZ,KAAK,CAACC,aAAa,IAAIS,WAAW,CAACC,KAAK,EAAE;QAC5CJ,IAAI,CAAC,eAAe,EAAEG,WAAW,CAACC,KAAK,CAACP,MAAM,CAAC;MACjD;IACF;IAEAR,SAAS,CAACgB,YAAY,CAAC;IAEvBjB,SAAS,CAAC,MAAAkB,YAAA;MAAA,OAEAb,KAAK,CAACC,aAAa,GAAGQ,SAAS,GAAGK,SAAS;MAAA,SAC1C,CACL,wBAAwB,EACxBd,KAAK,CAACe,KAAK,CACZ;MAAA,SACOf,KAAK,CAACgB;IAAK,IAEjBR,KAAK,CAACS,OAAO,IAAI,EAEtB,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"VVirtualScrollItem.mjs","names":["makeComponentProps","useResizeObserver","useToggleScope","genericComponent","propsFactory","useRender","onUpdated","watch","makeVVirtualScrollItemProps","dynamicHeight","Boolean","VVirtualScrollItem","name","props","emits","height","setup","_ref","emit","slots","resizeRef","contentRect","value","updateHeight","_createVNode","undefined","class","style","default"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\nimport { useToggleScope } from '@/composables/toggleScope'\n\n// Utilities\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { onUpdated, watch } from 'vue'\n\nexport const makeVVirtualScrollItemProps = propsFactory({\n  dynamicHeight: Boolean,\n\n  ...makeComponentProps(),\n}, 'v-virtual-scroll-item')\n\nexport const VVirtualScrollItem = genericComponent()({\n  name: 'VVirtualScrollItem',\n\n  props: makeVVirtualScrollItemProps(),\n\n  emits: {\n    'update:height': (height: number) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const { resizeRef, contentRect } = useResizeObserver()\n\n    useToggleScope(() => props.dynamicHeight, () => {\n      watch(() => contentRect.value?.height, height => {\n        if (height != null) emit('update:height', height)\n      })\n    })\n\n    function updateHeight () {\n      if (props.dynamicHeight && contentRect.value) {\n        emit('update:height', contentRect.value.height)\n      }\n    }\n\n    onUpdated(updateHeight)\n\n    useRender(() => (\n      <div\n        ref={ props.dynamicHeight ? resizeRef : undefined }\n        class={[\n          'v-virtual-scroll__item',\n          props.class,\n        ]}\n        style={ props.style }\n      >\n        { slots.default?.() }\n      </div>\n    ))\n  },\n})\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB;AAAA,SACjBC,cAAc,6CAEvB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAClD,SAASC,SAAS,EAAEC,KAAK,QAAQ,KAAK;AAEtC,OAAO,MAAMC,2BAA2B,GAAGJ,YAAY,CAAC;EACtDK,aAAa,EAAEC,OAAO;EAEtB,GAAGV,kBAAkB;AACvB,CAAC,EAAE,uBAAuB,CAAC;AAE3B,OAAO,MAAMW,kBAAkB,GAAGR,gBAAgB,EAAE,CAAC;EACnDS,IAAI,EAAE,oBAAoB;EAE1BC,KAAK,EAAEL,2BAA2B,EAAE;EAEpCM,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAmB;IAAA,IAAjB;MAAEC,IAAI;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC3B,MAAM;MAAEG,SAAS;MAAEC;IAAY,CAAC,GAAGpB,iBAAiB,EAAE;IAEtDC,cAAc,CAAC,MAAMW,KAAK,CAACJ,aAAa,EAAE,MAAM;MAC9CF,KAAK,CAAC,MAAMc,WAAW,CAACC,KAAK,EAAEP,MAAM,EAAEA,MAAM,IAAI;QAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEG,IAAI,CAAC,eAAe,EAAEH,MAAM,CAAC;MACnD,CAAC,CAAC;IACJ,CAAC,CAAC;IAEF,SAASQ,YAAYA,CAAA,EAAI;MACvB,IAAIV,KAAK,CAACJ,aAAa,IAAIY,WAAW,CAACC,KAAK,EAAE;QAC5CJ,IAAI,CAAC,eAAe,EAAEG,WAAW,CAACC,KAAK,CAACP,MAAM,CAAC;MACjD;IACF;IAEAT,SAAS,CAACiB,YAAY,CAAC;IAEvBlB,SAAS,CAAC,MAAAmB,YAAA;MAAA,OAEAX,KAAK,CAACJ,aAAa,GAAGW,SAAS,GAAGK,SAAS;MAAA,SAC1C,CACL,wBAAwB,EACxBZ,KAAK,CAACa,KAAK,CACZ;MAAA,SACOb,KAAK,CAACc;IAAK,IAEjBR,KAAK,CAACS,OAAO,IAAI,EAEtB,CAAC;EACJ;AACF,CAAC,CAAC"}