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

package/lib/components/VImg/VImg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","genericComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","loadstart","event","load","error","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","val","oldVal","pollForSize","isIntersecting","lazyImg","Image","complete","onError","onLoad","getSrc","img","timer","timeout","poll","clearTimeout","imgHeight","imgWidth","window","setTimeout","endsWith","startsWith","containClasses","__image","sources","transition","__preloadImage","__placeholder","placeholder","__error","__gradient","backgroundImage","isBooted","stop","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport type VImgSlots = {\n  default: []\n  placeholder: []\n  error: []\n  sources: []\n}\n\nexport const VImg = genericComponent<VImgSlots>()({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: {\n    loadstart: (event: string | undefined) => true,\n    load: (event: string | undefined) => true,\n    error: (event: string | undefined) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect || 0),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    watch(aspectRatio, (val, oldVal) => {\n      if (!val && oldVal && image.value) {\n        pollForSize(image.value)\n      }\n    })\n\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    let timer = -1\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        clearTimeout(timer)\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          timer = window.setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = () => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return null\n\n      const img = (\n        <img\n          class={['v-img__img', containClasses.value]}\n          src={ normalisedSrc.value.src }\n          srcset={ normalisedSrc.value.srcset }\n          alt=\"\"\n          sizes={ props.sizes }\n          ref={ image }\n          onLoad={ onLoad }\n          onError={ onError }\n        />\n      )\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __preloadImage = () => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt=\"\"\n          />\n        )}\n      </MaybeTransition>\n    )\n\n    const __placeholder = () => {\n      if (!slots.placeholder) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __error = () => {\n      if (!slots.error) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __gradient = () => {\n      if (!props.gradient) return null\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    }\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n      >{{\n        additional: () => (\n          <>\n            <__image />\n            <__preloadImage />\n            <__gradient />\n            <__placeholder />\n            <__error />\n          </>\n        ),\n        default: slots.default,\n      }}</VResponsive>\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":"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"}
+{"version":3,"file":"VImg.mjs","names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","genericComponent","SUPPORTS_INTERSECTION","useRender","VImg","name","directives","props","aspectRatio","String","Number","alt","cover","Boolean","eager","gradient","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","sizes","src","srcset","width","emits","loadstart","event","load","error","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","val","oldVal","pollForSize","isIntersecting","lazyImg","Image","complete","onError","onLoad","getSrc","img","timer","timeout","poll","clearTimeout","imgHeight","imgWidth","window","setTimeout","endsWith","startsWith","containClasses","__image","sources","transition","__preloadImage","__placeholder","placeholder","__error","__gradient","backgroundImage","isBooted","stop","requestAnimationFrame","additional","handler"],"sources":["../../../src/components/VImg/VImg.tsx"],"sourcesContent":["import './VImg.sass'\n\n// Components\nimport { VResponsive } from '@/components/VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps, MaybeTransition } from '@/composables/transition'\n\n// Utilities\nimport {\n  computed,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  genericComponent,\n  SUPPORTS_INTERSECTION,\n  useRender,\n} from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\n// not intended for public use, this is passed in by vuetify-loader\nexport interface srcObject {\n  src?: string\n  srcset?: string\n  lazySrc?: string\n  aspect: number\n}\n\nexport type VImgSlots = {\n  default: []\n  placeholder: []\n  error: []\n  sources: []\n}\n\nexport const VImg = genericComponent<VImgSlots>()({\n  name: 'VImg',\n\n  directives: { intersect },\n\n  props: {\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\n    gradient: String,\n    lazySrc: String,\n    options: {\n      type: Object as PropType<IntersectionObserverInit>,\n      // For more information on types, navigate to:\n      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API\n      default: () => ({\n        root: undefined,\n        rootMargin: undefined,\n        threshold: undefined,\n      }),\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    width: [String, Number],\n\n    ...makeTransitionProps(),\n  },\n\n  emits: {\n    loadstart: (event: string | undefined) => true,\n    load: (event: string | undefined) => true,\n    error: (event: string | undefined) => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const currentSrc = ref('') // Set from srcset\n    const image = ref<HTMLImageElement>()\n    const state = ref<'idle' | 'loading' | 'loaded' | 'error'>(props.eager ? 'loading' : 'idle')\n    const naturalWidth = ref<number>()\n    const naturalHeight = ref<number>()\n\n    const normalisedSrc = computed<srcObject>(() => {\n      return props.src && typeof props.src === 'object'\n        ? {\n          src: props.src.src,\n          srcset: props.srcset || props.src.srcset,\n          lazySrc: props.lazySrc || props.src.lazySrc,\n          aspect: Number(props.aspectRatio || props.src.aspect || 0),\n        } : {\n          src: props.src,\n          srcset: props.srcset,\n          lazySrc: props.lazySrc,\n          aspect: Number(props.aspectRatio || 0),\n        }\n    })\n    const aspectRatio = computed(() => {\n      return normalisedSrc.value.aspect || naturalWidth.value! / naturalHeight.value! || 0\n    })\n\n    watch(() => props.src, () => {\n      init(state.value !== 'idle')\n    })\n    watch(aspectRatio, (val, oldVal) => {\n      if (!val && oldVal && image.value) {\n        pollForSize(image.value)\n      }\n    })\n\n    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      if (props.eager && isIntersecting) return\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\n      }\n\n      if (!normalisedSrc.value.src) return\n\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n\n        if (image.value?.complete) {\n          if (!image.value.naturalWidth) {\n            onError()\n          }\n\n          if (state.value === 'error') return\n\n          if (!aspectRatio.value) pollForSize(image.value, null)\n          onLoad()\n        } else {\n          if (!aspectRatio.value) pollForSize(image.value!)\n          getSrc()\n        }\n      })\n    }\n\n    function onLoad () {\n      getSrc()\n      state.value = 'loaded'\n      emit('load', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function onError () {\n      state.value = 'error'\n      emit('error', image.value?.currentSrc || normalisedSrc.value.src)\n    }\n\n    function getSrc () {\n      const img = image.value\n      if (img) currentSrc.value = img.currentSrc || img.src\n    }\n\n    let timer = -1\n    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\n        clearTimeout(timer)\n        const { naturalHeight: imgHeight, naturalWidth: imgWidth } = img\n\n        if (imgHeight || imgWidth) {\n          naturalWidth.value = imgWidth\n          naturalHeight.value = imgHeight\n        } else if (!img.complete && state.value === 'loading' && timeout != null) {\n          timer = window.setTimeout(poll, timeout)\n        } else if (img.currentSrc.endsWith('.svg') || img.currentSrc.startsWith('data:image/svg+xml')) {\n          naturalWidth.value = 1\n          naturalHeight.value = 1\n        }\n      }\n\n      poll()\n    }\n\n    const containClasses = computed(() => ({\n      'v-img__img--cover': props.cover,\n      'v-img__img--contain': !props.cover,\n    }))\n\n    const __image = () => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return null\n\n      const img = (\n        <img\n          class={['v-img__img', containClasses.value]}\n          src={ normalisedSrc.value.src }\n          srcset={ normalisedSrc.value.srcset }\n          alt={ props.alt }\n          sizes={ props.sizes }\n          ref={ image }\n          onLoad={ onLoad }\n          onError={ onError }\n        />\n      )\n\n      const sources = slots.sources?.()\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          {\n            withDirectives(\n              sources\n                ? <picture class=\"v-img__picture\">{ sources }{ img }</picture>\n                : img,\n              [[vShow, state.value === 'loaded']]\n            )\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __preloadImage = () => (\n      <MaybeTransition transition={ props.transition }>\n        { normalisedSrc.value.lazySrc && state.value !== 'loaded' && (\n          <img\n            class={['v-img__img', 'v-img__img--preload', containClasses.value]}\n            src={ normalisedSrc.value.lazySrc }\n            alt={ props.alt }\n          />\n        )}\n      </MaybeTransition>\n    )\n\n    const __placeholder = () => {\n      if (!slots.placeholder) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { (state.value === 'loading' || (state.value === 'error' && !slots.error)) &&\n          <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __error = () => {\n      if (!slots.error) return null\n\n      return (\n        <MaybeTransition transition={ props.transition } appear>\n          { state.value === 'error' &&\n            <div class=\"v-img__error\">{ slots.error() }</div>\n          }\n        </MaybeTransition>\n      )\n    }\n\n    const __gradient = () => {\n      if (!props.gradient) return null\n\n      return <div class=\"v-img__gradient\" style={{ backgroundImage: `linear-gradient(${props.gradient})` }} />\n    }\n\n    const isBooted = ref(false)\n    {\n      const stop = watch(aspectRatio, val => {\n        if (val) {\n          // Doesn't work with nextTick, idk why\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              isBooted.value = true\n            })\n          })\n          stop()\n        }\n      })\n    }\n\n    useRender(() => (\n      <VResponsive\n        class={[\n          'v-img',\n          { 'v-img--booting': !isBooted.value },\n        ]}\n        style={{ width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width) }}\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-intersect={[{\n          handler: init,\n          options: props.options,\n        }, null, ['once']]}\n      >{{\n        additional: () => (\n          <>\n            <__image />\n            <__preloadImage />\n            <__gradient />\n            <__placeholder />\n            <__error />\n          </>\n        ),\n        default: slots.default,\n      }}</VResponsive>\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n\nexport type VImg = InstanceType<typeof VImg>\n"],"mappings":"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"}

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

@@ -1,4 +1,9 @@
 import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes, nextTick, PropType } 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>];
+}
 
 interface srcObject {
     src?: string;
@@ -6,7 +11,213 @@ interface srcObject {
     lazySrc?: string;
     aspect: number;
 }
-declare const VImg: vue.DefineComponent<{
+declare const VImg: {
+    new (...args: any[]): {
+        $: vue.ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            transition: string | boolean | (vue.TransitionProps & {
+                component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+            });
+            eager: boolean;
+            options: IntersectionObserverInit;
+            cover: boolean;
+            src: string | srcObject;
+        }> & Omit<{
+            transition: string | boolean | (vue.TransitionProps & {
+                component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+            });
+            eager: boolean;
+            options: IntersectionObserverInit;
+            cover: boolean;
+            src: string | srcObject;
+        } & {
+            width?: string | number | undefined;
+            aspectRatio?: string | number | undefined;
+            alt?: string | undefined;
+            sizes?: string | undefined;
+            srcset?: string | undefined;
+            gradient?: string | undefined;
+            lazySrc?: string | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+                placeholder?: false | (() => vue.VNodeChild) | undefined;
+                error?: false | (() => vue.VNodeChild) | undefined;
+                sources?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            onError?: ((event: string | undefined) => any) | undefined;
+            onLoad?: ((event: string | undefined) => any) | undefined;
+            onLoadstart?: ((event: string | undefined) => any) | undefined;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "transition" | "eager" | "options" | "cover" | "src">;
+        $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: "error", event: string | undefined) => void) & ((event: "load", event: string | undefined) => void) & ((event: "loadstart", event: string | undefined) => void);
+        $el: any;
+        $options: vue.ComponentOptionsBase<{
+            transition: string | boolean | (vue.TransitionProps & {
+                component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+            });
+            eager: boolean;
+            options: IntersectionObserverInit;
+            cover: boolean;
+            src: string | srcObject;
+        } & {
+            width?: string | number | undefined;
+            aspectRatio?: string | number | undefined;
+            alt?: string | undefined;
+            sizes?: string | undefined;
+            srcset?: string | undefined;
+            gradient?: string | undefined;
+            lazySrc?: string | undefined;
+        } & {
+            $children?: {} | vue.VNodeChild | {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            };
+            $slots?: {
+                default?: (() => vue.VNodeChild) | undefined;
+                placeholder?: (() => vue.VNodeChild) | undefined;
+                error?: (() => vue.VNodeChild) | undefined;
+                sources?: (() => vue.VNodeChild) | undefined;
+            } | undefined;
+            'v-slots'?: {
+                default?: false | (() => vue.VNodeChild) | undefined;
+                placeholder?: false | (() => vue.VNodeChild) | undefined;
+                error?: false | (() => vue.VNodeChild) | undefined;
+                sources?: false | (() => vue.VNodeChild) | undefined;
+            } | undefined;
+        } & {
+            "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+            "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+        } & {
+            onError?: ((event: string | undefined) => any) | undefined;
+            onLoad?: ((event: string | undefined) => any) | undefined;
+            onLoadstart?: ((event: string | undefined) => any) | undefined;
+        }, {
+            currentSrc: vue.Ref<string>;
+            image: vue.Ref<HTMLImageElement | undefined>;
+            state: vue.Ref<"error" | "loaded" | "idle" | "loading">;
+            naturalWidth: vue.Ref<number | undefined>;
+            naturalHeight: vue.Ref<number | undefined>;
+        }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            loadstart: (event: string | undefined) => true;
+            load: (event: string | undefined) => true;
+            error: (event: string | undefined) => true;
+        }, string, {
+            transition: string | boolean | (vue.TransitionProps & {
+                component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+            });
+            eager: boolean;
+            options: IntersectionObserverInit;
+            cover: boolean;
+            src: string | srcObject;
+        }, {}, 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;
+    } & {
+        transition: string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        });
+        eager: boolean;
+        options: IntersectionObserverInit;
+        cover: boolean;
+        src: string | srcObject;
+    } & {
+        width?: string | number | undefined;
+        aspectRatio?: string | number | undefined;
+        alt?: string | undefined;
+        sizes?: string | undefined;
+        srcset?: string | undefined;
+        gradient?: string | undefined;
+        lazySrc?: string | undefined;
+    } & {
+        $children?: {} | vue.VNodeChild | {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        };
+        $slots?: {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        } | undefined;
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+            placeholder?: false | (() => vue.VNodeChild) | undefined;
+            error?: false | (() => vue.VNodeChild) | undefined;
+            sources?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+    } & {
+        onError?: ((event: string | undefined) => any) | undefined;
+        onLoad?: ((event: string | undefined) => any) | undefined;
+        onLoadstart?: ((event: string | undefined) => any) | undefined;
+    } & vue.ShallowUnwrapRef<{
+        currentSrc: vue.Ref<string>;
+        image: vue.Ref<HTMLImageElement | undefined>;
+        state: vue.Ref<"error" | "loaded" | "idle" | "loading">;
+        naturalWidth: vue.Ref<number | undefined>;
+        naturalHeight: vue.Ref<number | undefined>;
+    }> & {} & vue.ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
     transition: string | boolean | (vue.TransitionProps & {
         component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
     });
@@ -46,6 +257,10 @@ declare const VImg: vue.DefineComponent<{
     "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
     "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+} & {
+    onError?: ((event: string | undefined) => any) | undefined;
+    onLoad?: ((event: string | undefined) => any) | undefined;
+    onLoadstart?: ((event: string | undefined) => any) | undefined;
 }, {
     currentSrc: vue.Ref<string>;
     image: vue.Ref<HTMLImageElement | undefined>;
@@ -56,7 +271,7 @@ declare const VImg: vue.DefineComponent<{
     loadstart: (event: string | undefined) => true;
     load: (event: string | undefined) => true;
     error: (event: string | undefined) => true;
-}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, {
+}, string, {
     transition: string | boolean | (vue.TransitionProps & {
         component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
     });
@@ -64,51 +279,65 @@ declare const VImg: vue.DefineComponent<{
     options: IntersectionObserverInit;
     cover: boolean;
     src: string | srcObject;
-} & {
-    width?: string | number | undefined;
-    aspectRatio?: string | number | undefined;
-    alt?: string | undefined;
-    sizes?: string | undefined;
-    srcset?: string | undefined;
-    gradient?: string | undefined;
-    lazySrc?: string | undefined;
-} & {
-    $children?: {} | vue.VNodeChild | {
-        default?: (() => vue.VNodeChild) | undefined;
-        placeholder?: (() => vue.VNodeChild) | undefined;
-        error?: (() => vue.VNodeChild) | undefined;
-        sources?: (() => vue.VNodeChild) | undefined;
+}, {}, string> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    transition: {
+        type: PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        placeholder?: (() => vue.VNodeChild) | undefined;
-        error?: (() => vue.VNodeChild) | undefined;
-        sources?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
-    'v-slots'?: {
-        default?: false | (() => vue.VNodeChild) | undefined;
-        placeholder?: false | (() => vue.VNodeChild) | undefined;
-        error?: false | (() => vue.VNodeChild) | undefined;
-        sources?: false | (() => vue.VNodeChild) | undefined;
-    } | undefined;
-} & {
-    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
-    "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
-} & {
-    onError?: ((event: string | undefined) => any) | undefined;
-    onLoad?: ((event: string | undefined) => any) | undefined;
-    onLoadstart?: ((event: string | undefined) => any) | undefined;
-}, {
-    transition: string | boolean | (vue.TransitionProps & {
-        component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
-    });
-    eager: boolean;
-    options: IntersectionObserverInit;
-    cover: boolean;
-    src: string | srcObject;
-}>;
+    aspectRatio: (StringConstructor | NumberConstructor)[];
+    alt: StringConstructor;
+    cover: BooleanConstructor;
+    eager: BooleanConstructor;
+    gradient: StringConstructor;
+    lazySrc: StringConstructor;
+    options: {
+        type: PropType<IntersectionObserverInit>;
+        default: () => {
+            root: undefined;
+            rootMargin: undefined;
+            threshold: undefined;
+        };
+    };
+    sizes: StringConstructor;
+    src: {
+        type: PropType<string | srcObject>;
+        default: string;
+    };
+    srcset: StringConstructor;
+    width: (StringConstructor | NumberConstructor)[];
+}, vue.ExtractPropTypes<{
+    transition: {
+        type: PropType<string | boolean | (vue.TransitionProps & {
+            component?: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions> | undefined;
+        })>;
+        default: string;
+        validator: (val: unknown) => boolean;
+    };
+    aspectRatio: (StringConstructor | NumberConstructor)[];
+    alt: StringConstructor;
+    cover: BooleanConstructor;
+    eager: BooleanConstructor;
+    gradient: StringConstructor;
+    lazySrc: StringConstructor;
+    options: {
+        type: PropType<IntersectionObserverInit>;
+        default: () => {
+            root: undefined;
+            rootMargin: undefined;
+            threshold: undefined;
+        };
+    };
+    sizes: StringConstructor;
+    src: {
+        type: PropType<string | srcObject>;
+        default: string;
+    };
+    srcset: StringConstructor;
+    width: (StringConstructor | NumberConstructor)[];
+}>>;
 type VImg = InstanceType<typeof VImg>;
 
 export { VImg };