@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.2

package/lib/components/VIcon/VIcon.sass

@@ -1,73 +1,55 @@
-// Imports
-@import './index'
+@forward './variables'
+@use 'sass:map'
+@use '../../styles/settings'
+@use './variables' as *
 
 .v-icon
+  --v-icon-size-multiplier: 1
   align-items: center
-  color: rgba($icon-color, $icon-color-opacity)
   display: inline-flex
   font-feature-settings: 'liga'
+  height: $icon-size
   justify-content: center
   letter-spacing: $icon-letter-spacing
   line-height: $icon-line-height
   position: relative
   text-indent: $icon-text-indent
-  transition: $icon-transition
   user-select: none
   vertical-align: $icon-vertical-align
+  width: $icon-size
 
-  &--left
-    @include ltr()
-      margin-right: $icon-margin-start
+  &--clickable
+    cursor: pointer
 
-    @include rtl()
-      margin-left: $icon-margin-end
-
-  &--right
-    @include ltr()
-      margin-left: $icon-margin-start
-
-    @include rtl()
-      margin-right: $icon-margin-end
-
-  &--disabled
-    color: rgba($icon-disabled-color, $icon-disabled-color-opacity) !important
-    pointer-events: none
-
-  @each $name in $sizes
+  @each $name in settings.$sizes
     &--size-#{$name}
-      font-size: map-get($icon-sizes, $name)
-      height: map-get($icon-sizes, $name)
-      width: map-get($icon-sizes, $name)
+      font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)})
 
 .v-icon__svg
   fill: currentColor
+  width: 100%
+  height: 100%
 
-.v-icon
-  .v-btn &
-    color: inherit
+.v-icon--start
+  margin-inline-end: $icon-margin-start
 
-  &--size-default
-    .v-btn:not(.v-btn--icon) &
-      font-size: $icon-btn-font-size
-      height: $icon-btn-height
-      width: $icon-btn-width
+  .v-btn:not(.v-btn--icon) &
+    margin-inline-start: $icon-btn-margin-start
+    margin-inline-end: $icon-btn-margin-end
 
-  &--left
-    .v-btn:not(.v-btn--icon) &
-      @include ltr()
-        margin-left: calc(#{$icon-btn-margin-start})
-        margin-right: calc(#{$icon-btn-margin-end})
+  .v-btn.v-btn--stacked &
+    margin-inline-start: 0
+    margin-inline-end: 0
+    margin-bottom: $icon-btn-stacked-margin
 
-      @include rtl()
-        margin-left: calc(#{$icon-btn-margin-end})
-        margin-right: calc(#{$icon-btn-margin-start})
+.v-icon--end
+  margin-inline-start: $icon-margin-end
 
-  &--right
-    .v-btn:not(.v-btn--icon) &
-      @include ltr()
-        margin-left: calc(#{$icon-btn-margin-end})
-        margin-right: calc(#{$icon-btn-margin-start})
+  .v-btn:not(.v-btn--icon) &
+    margin-inline-start: $icon-btn-margin-end
+    margin-inline-end: $icon-btn-margin-start
 
-      @include rtl()
-        margin-left: calc(#{$icon-btn-margin-start})
-        margin-right: calc(#{$icon-btn-margin-end})
+  .v-btn.v-btn--stacked &
+    margin-inline-start: 0
+    margin-inline-end: 0
+    margin-top: $icon-btn-stacked-margin

package/lib/components/VIcon/_variables.scss

@@ -1,33 +1,30 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
 // Defaults
-$icon-btn-size: 1em !default;
-$icon-btn-font-size: (18 / 14) * $icon-btn-size !default;
-$icon-btn-height: $icon-btn-size !default;
-$icon-btn-width: $icon-btn-size !default;
 $icon-btn-margin-start-multiplier: -9 !default;
 $icon-btn-margin-end-multiplier: 4.5 !default;
-$icon-btn-margin-start: var(--v-btn-height) / $icon-btn-margin-start-multiplier !default;
-$icon-btn-margin-end: var(--v-btn-height) / $icon-btn-margin-end-multiplier !default;
-$icon-color-opacity: var(--v-icon-opacity) !default;
-$icon-color: var(--v-theme-on-background) !default;
-$icon-disabled-color-opacity: var(--v-disabled-opacity) !default;
-$icon-disabled-color: var(--v-theme-on-background) !default;
-$icon-left-margin-left: map-get($grid-gutters, 'md') !default;
+$icon-btn-margin-start: calc(var(--v-btn-height) / #{$icon-btn-margin-start-multiplier}) !default;
+$icon-btn-margin-end: calc(var(--v-btn-height) / #{$icon-btn-margin-end-multiplier}) !default;
+$icon-btn-stacked-margin: 4px !default;
+$icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default;
 $icon-letter-spacing: normal !default;
 $icon-line-height: 1 !default;
-$icon-margin-end: map-get($grid-gutters, 'md') !default;
-$icon-margin-start: map-get($grid-gutters, 'md') !default;
+$icon-margin-end: map.get(settings.$grid-gutters, 'md') !default;
+$icon-margin-start: map.get(settings.$grid-gutters, 'md') !default;
+$icon-size: 1em !default;
 $icon-text-indent: 0 !default;
-$icon-transition: 0.3s $standard-easing, visibility 0s !default;
 $icon-vertical-align: middle !default;
 
 $icon-sizes: () !default;
-$icon-sizes: map-deep-merge(
+$icon-sizes: tools.map-deep-merge(
   (
-    'x-small': 16px,
-    'small': 20px,
-    'default': 24px,
-    'large': 28px,
-    'x-large': 32px,
+    'x-small': 1em,
+    'small': 1.25em,
+    'default': 1.5em,
+    'large': 1.75em,
+    'x-large': 2em,
   ),
   $icon-sizes
 );

package/lib/components/VIcon/index.mjs

@@ -1,3 +1,3 @@
-export { default as VIcon } from "./VIcon.mjs";
+export { VIcon } from "./VIcon.mjs";
 export { VComponentIcon, VSvgIcon, VLigatureIcon, VClassIcon } from "../../composables/icons.mjs";
 //# sourceMappingURL=index.mjs.map

package/lib/components/VIcon/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VIcon/index.ts"],"names":["default","VIcon","VComponentIcon","VSvgIcon","VLigatureIcon","VClassIcon"],"mappings":"SAASA,OAAO,IAAIC,K;SAElBC,c,EACAC,Q,EACAC,a,EACAC,U","sourcesContent":["export { default as VIcon } from './VIcon'\nexport {\n  VComponentIcon,\n  VSvgIcon,\n  VLigatureIcon,\n  VClassIcon,\n} from '@/composables/icons'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VIcon/index.ts"],"names":["VIcon","VComponentIcon","VSvgIcon","VLigatureIcon","VClassIcon"],"mappings":"SAASA,K;SAEPC,c,EACAC,Q,EACAC,a,EACAC,U","sourcesContent":["export { VIcon } from './VIcon'\nexport {\n  VComponentIcon,\n  VSvgIcon,\n  VLigatureIcon,\n  VClassIcon,\n} from '@/composables/icons'\n"],"file":"index.mjs"}

package/lib/components/VImg/VImg.css

@@ -0,0 +1,34 @@
+.v-img {
+  --v-theme-overlay-multiplier: 3;
+  z-index: 0;
+}
+.v-img--booting .v-responsive__sizer {
+  transition: none;
+}
+
+.v-img__img,
+.v-img__picture,
+.v-img__gradient,
+.v-img__placeholder,
+.v-img__error {
+  z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.v-img__img--preload {
+  filter: blur(4px);
+}
+.v-img__img--contain {
+  object-fit: contain;
+}
+.v-img__img--cover {
+  object-fit: cover;
+}
+
+.v-img__gradient {
+  background-repeat: no-repeat;
+}

package/lib/components/VImg/VImg.mjs

@@ -1,23 +1,26 @@
-import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import "./VImg.sass"; // Vue
-
-import { computed, defineComponent, h, nextTick, onBeforeMount, ref, vShow, watch, withDirectives } from 'vue'; // Components
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
+import "./VImg.css"; // Components
 
 import { VResponsive } from "../VResponsive/index.mjs"; // Directives
 
-import intersect from "../../directives/intersect/index.mjs";
-// Composables
-import { makeTransitionProps } from "../../composables/transition.mjs"; // Utils
+import intersect from "../../directives/intersect/index.mjs"; // Composables
+
+import { makeTransitionProps, MaybeTransition } from "../../composables/transition.mjs"; // Utilities
 
-import { makeProps, maybeTransition, SUPPORTS_INTERSECTION, useDirective, useRender } from "../../util/index.mjs"; // Types
+import { computed, h, nextTick, onBeforeMount, ref, vShow, watch, withDirectives } from 'vue';
+import { convertToUnit, defineComponent, SUPPORTS_INTERSECTION, useRender } from "../../util/index.mjs"; // Types
 
-export default defineComponent({
+export const VImg = defineComponent({
   name: 'VImg',
-  props: makeProps({
+  directives: {
+    intersect
+  },
+  props: {
     aspectRatio: [String, Number],
     alt: String,
     cover: Boolean,
     eager: Boolean,
+    gradient: String,
     lazySrc: String,
     options: {
       type: Object,
@@ -29,28 +32,26 @@ export default defineComponent({
         threshold: undefined
       })
     },
-    position: {
-      type: String,
-      default: 'center center'
-    },
     sizes: String,
     src: {
       type: [String, Object],
       default: ''
     },
     srcset: String,
+    width: [String, Number],
     ...makeTransitionProps()
-  }),
+  },
   emits: ['loadstart', 'load', 'error'],
 
-  setup(props, {
-    emit,
-    slots
-  }) {
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
     const currentSrc = ref(''); // Set from srcset
 
     const image = ref();
-    const state = ref('idle');
+    const state = ref(props.eager ? 'loading' : 'idle');
     const naturalWidth = ref();
     const naturalHeight = ref();
     const normalisedSrc = computed(() => {
@@ -76,39 +77,50 @@ export default defineComponent({
     onBeforeMount(() => init());
 
     function init(isIntersecting) {
-      // If the current browser supports the intersection
-      // observer api, the image is not observable, and
-      // the eager prop isn't being used, do not load
+      if (props.eager && isIntersecting) return;
       if (SUPPORTS_INTERSECTION && !isIntersecting && !props.eager) return;
       state.value = 'loading';
-      nextTick(() => {
-        var _image$value;
-
-        emit('loadstart', ((_image$value = image.value) == null ? void 0 : _image$value.currentSrc) || normalisedSrc.value.src);
-        if (!aspectRatio.value) pollForSize(image.value);
-        getSrc();
-      });
 
       if (normalisedSrc.value.lazySrc) {
         const lazyImg = new Image();
         lazyImg.src = normalisedSrc.value.lazySrc;
         pollForSize(lazyImg, null);
       }
+
+      if (!normalisedSrc.value.src) return;
+      nextTick(() => {
+        var _image$value, _image$value2;
+
+        emit('loadstart', ((_image$value = image.value) == null ? void 0 : _image$value.currentSrc) || normalisedSrc.value.src);
+
+        if ((_image$value2 = image.value) != null && _image$value2.complete) {
+          if (!image.value.naturalWidth) {
+            onError();
+          }
+
+          if (state.value === 'error') return;
+          if (!aspectRatio.value) pollForSize(image.value, null);
+          onLoad();
+        } else {
+          if (!aspectRatio.value) pollForSize(image.value);
+          getSrc();
+        }
+      });
     }
 
     function onLoad() {
-      var _image$value2;
+      var _image$value3;
 
       getSrc();
       state.value = 'loaded';
-      emit('load', ((_image$value2 = image.value) == null ? void 0 : _image$value2.currentSrc) || normalisedSrc.value.src);
+      emit('load', ((_image$value3 = image.value) == null ? void 0 : _image$value3.currentSrc) || normalisedSrc.value.src);
     }
 
     function onError() {
-      var _image$value3;
+      var _image$value4;
 
       state.value = 'error';
-      emit('error', ((_image$value3 = image.value) == null ? void 0 : _image$value3.currentSrc) || normalisedSrc.value.src);
+      emit('error', ((_image$value4 = image.value) == null ? void 0 : _image$value4.currentSrc) || normalisedSrc.value.src);
     }
 
     function getSrc() {
@@ -116,7 +128,9 @@ export default defineComponent({
       if (img) currentSrc.value = img.currentSrc || img.src;
     }
 
-    function pollForSize(img, timeout = 100) {
+    function pollForSize(img) {
+      let timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;
+
       const poll = () => {
         const {
           naturalHeight: imgHeight,
@@ -143,6 +157,8 @@ export default defineComponent({
     }));
 
     const __image = computed(() => {
+      var _slots$sources;
+
       if (!normalisedSrc.value.src || state.value === 'idle') return;
       const img = h('img', {
         class: ['v-img__img', containClasses.value],
@@ -153,60 +169,94 @@ export default defineComponent({
         onLoad,
         onError
       });
-      const sources = slots.sources == null ? void 0 : slots.sources();
-      return maybeTransition(props, {
-        appear: true
-      }, withDirectives(sources ? _createVNode("picture", {
-        "class": "v-img__picture"
-      }, [sources, img]) : img, [[vShow, state.value === 'loaded']]));
+      const sources = (_slots$sources = slots.sources) == null ? void 0 : _slots$sources.call(slots);
+      return _createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [withDirectives(sources ? _createVNode("picture", {
+          "class": "v-img__picture"
+        }, [sources, img]) : img, [[vShow, state.value === 'loaded']])]
+      });
     });
 
-    const __preloadImage = computed(() => {
-      return maybeTransition(props, {}, normalisedSrc.value.lazySrc && state.value !== 'loaded' ? _createVNode("img", {
+    const __preloadImage = computed(() => _createVNode(MaybeTransition, {
+      "transition": props.transition
+    }, {
+      default: () => [normalisedSrc.value.lazySrc && state.value !== 'loaded' && _createVNode("img", {
         "class": ['v-img__img', 'v-img__img--preload', containClasses.value],
         "src": normalisedSrc.value.lazySrc,
         "alt": ""
-      }, null, 10, ["src"]) : undefined);
-    });
+      }, null)]
+    }));
 
     const __placeholder = computed(() => {
       if (!slots.placeholder) return;
-      const placeholder = state.value === 'loading' || state.value === 'error' && !slots.error ? _createVNode("div", {
-        "class": "v-img__placeholder"
-      }, [slots.placeholder()]) : undefined;
-      return maybeTransition(props, {
-        appear: true
-      }, placeholder);
+      return _createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [(state.value === 'loading' || state.value === 'error' && !slots.error) && _createVNode("div", {
+          "class": "v-img__placeholder"
+        }, [slots.placeholder()])]
+      });
     });
 
     const __error = computed(() => {
       if (!slots.error) return;
-      const error = state.value === 'error' ? _createVNode("div", {
-        "class": "v-img__error"
-      }, [slots.error()]) : undefined;
-      return maybeTransition(props, {
-        appear: true
-      }, error);
+      return _createVNode(MaybeTransition, {
+        "transition": props.transition,
+        "appear": true
+      }, {
+        default: () => [state.value === 'error' && _createVNode("div", {
+          "class": "v-img__error"
+        }, [slots.error()])]
+      });
     });
 
-    useRender(() => withDirectives(_createVNode(VResponsive, {
-      "class": "v-img",
+    const __gradient = computed(() => {
+      if (!props.gradient) return;
+      return _createVNode("div", {
+        "class": "v-img__gradient",
+        "style": {
+          backgroundImage: `linear-gradient(${props.gradient})`
+        }
+      }, null);
+    });
+
+    const isBooted = ref(false);
+    {
+      const stop = watch(aspectRatio, val => {
+        if (val) {
+          // Doesn't work with nextTick, idk why
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              isBooted.value = true;
+            });
+          });
+          stop();
+        }
+      });
+    }
+    useRender(() => _withDirectives(_createVNode(VResponsive, {
+      "class": ['v-img', {
+        'v-img--booting': !isBooted.value
+      }],
+      "style": {
+        width: convertToUnit(props.width === 'auto' ? naturalWidth.value : props.width)
+      },
       "aspectRatio": aspectRatio.value,
       "aria-label": props.alt,
       "role": props.alt ? 'img' : undefined
     }, {
-      additional: () => [__image.value, __preloadImage.value, __placeholder.value, __error.value],
-      default: slots.default,
-      _: 1
-    }, 8, ["aspectRatio", "aria-label", "role"]), [useDirective(intersect, {
-      value: {
-        handler: init,
-        options: props.options
-      },
-      modifiers: {
-        once: true
-      }
-    })]));
+      additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],
+      default: slots.default
+    }), [[_resolveDirective("intersect"), {
+      handler: init,
+      options: props.options
+    }, null, {
+      once: true
+    }]]));
     return {
       currentSrc,
       image,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VImg/VImg.tsx"],"names":["computed","defineComponent","h","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","VResponsive","intersect","makeTransitionProps","makeProps","maybeTransition","SUPPORTS_INTERSECTION","useDirective","useRender","name","props","aspectRatio","String","Number","alt","cover","Boolean","eager","lazySrc","options","type","Object","default","root","undefined","rootMargin","threshold","position","sizes","src","srcset","emits","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","pollForSize","getSrc","lazyImg","Image","onLoad","onError","img","timeout","poll","imgHeight","imgWidth","complete","setTimeout","endsWith","startsWith","containClasses","__image","class","sources","appear","__preloadImage","__placeholder","placeholder","error","__error","additional","handler","modifiers","once"],"mappings":"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","sourcesContent":["import './VImg.sass'\n\n// Vue\nimport {\n  computed,\n  defineComponent,\n  h,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\n\n// Components\nimport { VResponsive } from '../VResponsive'\n\n// Directives\nimport intersect from '@/directives/intersect'\nimport type { ObserveDirectiveBinding } from '@/directives/intersect'\n\n// Composables\nimport { makeTransitionProps } from '@/composables/transition'\n\n// Utils\nimport {\n  makeProps,\n  maybeTransition,\n  SUPPORTS_INTERSECTION,\n  useDirective,\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 default defineComponent({\n  name: 'VImg',\n\n  props: makeProps({\n    aspectRatio: [String, Number],\n    alt: String,\n    cover: Boolean,\n    eager: Boolean,\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    position: {\n      type: String,\n      default: 'center center',\n    },\n    sizes: String,\n    src: {\n      type: [String, Object] as PropType<string | srcObject>,\n      default: '',\n    },\n    srcset: String,\n    ...makeTransitionProps(),\n  }),\n\n  emits: ['loadstart', 'load', 'error'],\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'>('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),\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    // TODO: getSrc when window width changes\n\n    onBeforeMount(() => init())\n\n    function init (isIntersecting?: boolean) {\n      // If the current browser supports the intersection\n      // observer api, the image is not observable, and\n      // the eager prop isn't being used, do not load\n      if (\n        SUPPORTS_INTERSECTION &&\n        !isIntersecting &&\n        !props.eager\n      ) return\n\n      state.value = 'loading'\n      nextTick(() => {\n        emit('loadstart', image.value?.currentSrc || normalisedSrc.value.src)\n        if (!aspectRatio.value) pollForSize(image.value!)\n        getSrc()\n      })\n\n      if (normalisedSrc.value.lazySrc) {\n        const lazyImg = new Image()\n        lazyImg.src = normalisedSrc.value.lazySrc\n        pollForSize(lazyImg, null)\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    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\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          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 = computed(() => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return\n\n      const img = h('img', {\n        class: ['v-img__img', containClasses.value],\n        src: normalisedSrc.value.src,\n        srcset: normalisedSrc.value.srcset,\n        sizes: props.sizes,\n        ref: image,\n        onLoad,\n        onError,\n      })\n\n      const sources = slots.sources?.()\n\n      return maybeTransition(\n        props,\n        { appear: true },\n        withDirectives(\n          sources\n            ? <picture class=\"v-img__picture\">{sources}{img}</picture>\n            : img,\n          [[vShow, state.value === 'loaded']]\n        )\n      )\n    })\n\n    const __preloadImage = computed(() => {\n      return maybeTransition(\n        props,\n        {},\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        ) : undefined\n      )\n    })\n\n    const __placeholder = computed(() => {\n      if (!slots.placeholder) return\n\n      const placeholder = state.value === 'loading' || (state.value === 'error' && !slots.error)\n        ? <div class=\"v-img__placeholder\">{ slots.placeholder() }</div>\n        : undefined\n\n      return maybeTransition(props, { appear: true }, placeholder)\n    })\n\n    const __error = computed(() => {\n      if (!slots.error) return\n\n      const error = state.value === 'error'\n        ? <div class=\"v-img__error\">{ slots.error() }</div>\n        : undefined\n\n      return maybeTransition(props, { appear: true }, error)\n    })\n\n    useRender(() => withDirectives(\n      <VResponsive\n        class=\"v-img\"\n        aspectRatio={ aspectRatio.value }\n        aria-label={ props.alt }\n        role={ props.alt ? 'img' : undefined }\n        v-slots={{\n          additional: () => [__image.value, __preloadImage.value, __placeholder.value, __error.value],\n          default: slots.default,\n        }}\n      />,\n      [useDirective<ObserveDirectiveBinding>(intersect, {\n        value: {\n          handler: init,\n          options: props.options,\n        },\n        modifiers: { once: true },\n      })]\n    ))\n\n    return {\n      currentSrc,\n      image,\n      state,\n      naturalWidth,\n      naturalHeight,\n    }\n  },\n})\n"],"file":"VImg.mjs"}
+{"version":3,"sources":["../../../src/components/VImg/VImg.tsx"],"names":["VResponsive","intersect","makeTransitionProps","MaybeTransition","computed","h","nextTick","onBeforeMount","ref","vShow","watch","withDirectives","convertToUnit","defineComponent","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","setup","emit","slots","currentSrc","image","state","naturalWidth","naturalHeight","normalisedSrc","aspect","value","init","isIntersecting","lazyImg","Image","pollForSize","complete","onError","onLoad","getSrc","img","timeout","poll","imgHeight","imgWidth","setTimeout","endsWith","startsWith","containClasses","__image","class","sources","transition","__preloadImage","__placeholder","placeholder","error","__error","__gradient","backgroundImage","isBooted","stop","val","requestAnimationFrame","additional","handler"],"mappings":"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","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  h,\n  nextTick,\n  onBeforeMount,\n  ref,\n  vShow,\n  watch,\n  withDirectives,\n} from 'vue'\nimport {\n  convertToUnit,\n  defineComponent,\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 const VImg = defineComponent({\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: ['loadstart', 'load', 'error'],\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),\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    // 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    function pollForSize (img: HTMLImageElement, timeout: number | null = 100) {\n      const poll = () => {\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          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 = computed(() => {\n      if (!normalisedSrc.value.src || state.value === 'idle') return\n\n      const img = h('img', {\n        class: ['v-img__img', containClasses.value],\n        src: normalisedSrc.value.src,\n        srcset: normalisedSrc.value.srcset,\n        sizes: props.sizes,\n        ref: image,\n        onLoad,\n        onError,\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 = computed(() => (\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 = computed(() => {\n      if (!slots.placeholder) return\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 = computed(() => {\n      if (!slots.error) return\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 = computed(() => {\n      if (!props.gradient) return\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        v-slots={{\n          additional: () => [__image.value, __preloadImage.value, __gradient.value, __placeholder.value, __error.value],\n          default: slots.default,\n        }}\n      />\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"],"file":"VImg.mjs"}

package/lib/components/VImg/VImg.sass

@@ -1,26 +1,32 @@
-@import './index'
+@forward './variables'
+@use '../../styles/tools'
+@use './variables' as *
 
 .v-img
   --v-theme-overlay-multiplier: 3
   z-index: 0
 
+  &--booting .v-responsive__sizer
+    transition: none
+
 .v-img__img,
 .v-img__picture,
+.v-img__gradient,
 .v-img__placeholder,
 .v-img__error
   z-index: -1
-  position: absolute
-  top: 0
-  left: 0
-  width: 100%
-  height: 100%
+
+  @include tools.absolute()
 
 .v-img__img
   &--preload
     filter: $img-preload-filter
 
   &--contain
-    background-size: contain
+    object-fit: contain
 
   &--cover
-    background-size: cover
+    object-fit: cover
+
+.v-img__gradient
+  background-repeat: no-repeat

package/lib/components/VImg/_variables.scss

@@ -1,2 +1,3 @@
 // Defaults
 $img-preload-filter: blur(4px) !default;
+$img-card-media-height: 200px !default;

package/lib/components/VImg/index.mjs

@@ -1,2 +1,2 @@
-export { default as VImg } from "./VImg.mjs";
+export { VImg } from "./VImg.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VImg/index.ts"],"names":["default","VImg"],"mappings":"SAASA,OAAO,IAAIC,I","sourcesContent":["export { default as VImg } from './VImg'\n"],"file":"index.mjs"}
+{"version":3,"sources":["../../../src/components/VImg/index.ts"],"names":["VImg"],"mappings":"SAASA,I","sourcesContent":["export { VImg } from './VImg'\n"],"file":"index.mjs"}