vue-datocms 3.0.2 → 4.0.0

package/dist/index.cjs.js

@@ -27,8 +27,7 @@ const useInView = ({ threshold, rootMargin }) => {
     if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver(
         (entries) => {
-          const image = entries[0];
-          if (image.isIntersecting && observer.value) {
+          if (entries.some(({ isIntersecting }) => isIntersecting) && observer.value) {
             inView.value = true;
             observer.value.disconnect();
           }
@@ -191,6 +190,36 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
   }
   return true;
 };
+const buildSrcSet = (src, width, candidateMultipliers) => {
+  if (!src || !width) {
+    return void 0;
+  }
+  return candidateMultipliers.map((multiplier) => {
+    const url = new URL(src);
+    if (multiplier !== 1) {
+      url.searchParams.set("dpr", `${multiplier}`);
+      const maxH = url.searchParams.get("max-h");
+      const maxW = url.searchParams.get("max-w");
+      if (maxH) {
+        url.searchParams.set(
+          "max-h",
+          `${Math.floor(parseInt(maxH) * multiplier)}`
+        );
+      }
+      if (maxW) {
+        url.searchParams.set(
+          "max-w",
+          `${Math.floor(parseInt(maxW) * multiplier)}`
+        );
+      }
+    }
+    const finalWidth = Math.floor(width * multiplier);
+    if (finalWidth < 50) {
+      return null;
+    }
+    return `${url.toString()} ${finalWidth}w`;
+  }).filter(Boolean).join(",");
+};
 const Image = vueDemi.defineComponent({
   name: "DatocmsImage",
   props: {
@@ -240,6 +269,24 @@ const Image = vueDemi.defineComponent({
     },
     objectPosition: {
       type: String
+    },
+    usePlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    sizes: {
+      type: String
+    },
+    priority: {
+      type: Boolean,
+      default: false
+    },
+    srcSetCandidates: {
+      type: Array,
+      validator: (values) => values.every((value) => {
+        return typeof value === "number";
+      }),
+      default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     }
   },
   setup(props) {
@@ -251,21 +298,33 @@ const Image = vueDemi.defineComponent({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
+    const computedLazyLoad = vueDemi.ref(props.priority ? false : props.lazyLoad);
+    const imageRef = vueDemi.ref();
+    vueDemi.watchEffect(() => {
+      if (!imageRef.value) {
+        return;
+      }
+      if (imageRef.value.complete && imageRef.value.naturalWidth) {
+        handleLoad();
+      }
+    });
     return {
       inView,
       elRef,
       loaded,
-      handleLoad
+      handleLoad,
+      computedLazyLoad,
+      imageRef
     };
   },
   render() {
     const addImage = imageAddStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
     const showImage = imageShowStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
@@ -273,30 +332,30 @@ const Image = vueDemi.defineComponent({
       ...vueDemi.isVue2 && {
         props: {
           srcset: this.data.webpSrcSet,
-          sizes: this.data.sizes,
+          sizes: this.sizes ?? this.data.sizes ?? void 0,
           type: "image/webp"
         }
       },
       ...vueDemi.isVue3 && {
         srcset: this.data.webpSrcSet,
-        sizes: this.data.sizes,
+        sizes: this.sizes ?? this.data.sizes ?? void 0,
         type: "image/webp"
       }
     });
     const regularSource = this.data.srcSet && vueDemi.h(Source, {
       ...vueDemi.isVue2 && {
         props: {
-          srcset: this.data.srcSet,
-          sizes: this.data.sizes
+          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+          sizes: this.sizes ?? this.data.sizes ?? void 0
         }
       },
       ...vueDemi.isVue3 && {
-        srcset: this.data.srcSet,
-        sizes: this.data.sizes
+        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: this.sizes ?? this.data.sizes ?? void 0
       }
     });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = vueDemi.h("div", {
+    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? vueDemi.h("div", {
       style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
@@ -305,11 +364,15 @@ const Image = vueDemi.defineComponent({
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
         transition,
-        ...absolutePositioning
+        position: "absolute",
+        left: "-5%",
+        top: "-5%",
+        width: "110%",
+        height: "110%"
       }
-    });
+    }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height || width / aspectRatio;
+    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
     const sizer = this.layout !== "fill" ? vueDemi.h(Sizer, {
       ...vueDemi.isVue2 && {
         props: {
@@ -350,7 +413,8 @@ const Image = vueDemi.defineComponent({
               attrs: {
                 src: this.data.src,
                 alt: this.data.alt,
-                title: this.data.title
+                title: this.data.title,
+                fetchpriority: this.priority ? "high" : void 0
               },
               on: {
                 load: this.handleLoad
@@ -360,16 +424,18 @@ const Image = vueDemi.defineComponent({
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
+              fetchpriority: this.priority ? "high" : void 0,
               onLoad: this.handleLoad
             },
+            ref: "imageRef",
             class: this.pictureClass,
             style: {
-              ...absolutePositioning,
-              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
+              ...absolutePositioning,
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition
+              objectPosition: this.objectPosition,
+              ...this.pictureStyle
             }
           })
         ]),
@@ -391,8 +457,14 @@ const Image = vueDemi.defineComponent({
                   alt: this.data.alt,
                   title: this.data.title,
                   class: this.pictureClass,
-                  style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                  loading: "lazy"
+                  style: toCss({
+                    ...absolutePositioning,
+                    objectFit: this.objectFit,
+                    objectPosition: this.objectPosition,
+                    ...this.pictureStyle
+                  }),
+                  loading: this.computedLazyLoad ? "lazy" : void 0,
+                  fetchpriority: this.priority ? "high" : void 0
                 })
               ])
             }
@@ -414,7 +486,8 @@ const Image = vueDemi.defineComponent({
                 title: this.data.title,
                 class: this.pictureClass,
                 style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                loading: "lazy"
+                loading: this.computedLazyLoad ? "lazy" : void 0,
+                fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { Options, ConnectionStatus } from 'datocms-listen';
 
 declare type ResponsiveImageType = {
     /** The aspect ratio (width/height) of the image */
-    aspectRatio: number;
+    aspectRatio?: number;
     /** A base64-encoded thumbnail to offer during image loading */
     base64?: string;
     /** The height of the image */
@@ -100,11 +100,47 @@ declare const Image: vue_demi.DefineComponent<{
     objectPosition: {
         type: StringConstructor;
     };
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
+    sizes: {
+        type: StringConstructor;
+    };
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
+    srcSetCandidates: {
+        type: ArrayConstructor;
+        validator: (values: any[]) => values is number[];
+        default: () => number[];
+    };
 }, {
     inView: vue_demi.Ref<boolean>;
     elRef: vue_demi.Ref<HTMLElement | null>;
     loaded: vue_demi.Ref<boolean>;
     handleLoad: () => void;
+    computedLazyLoad: vue_demi.Ref<boolean>;
+    imageRef: vue_demi.Ref<HTMLImageElement | undefined>;
 }, unknown, {}, {}, vue_demi.ComponentOptionsMixin, vue_demi.ComponentOptionsMixin, {}, string, vue_demi.VNodeProps & vue_demi.AllowedComponentProps & vue_demi.ComponentCustomProps, Readonly<vue_demi.ExtractPropTypes<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
@@ -175,6 +211,40 @@ declare const Image: vue_demi.DefineComponent<{
     objectPosition: {
         type: StringConstructor;
     };
+    /** Whether the component should use a blurred image placeholder */
+    usePlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * The HTML5 `sizes` attribute for the image
+     *
+     * Learn more about srcset and sizes:
+     * -> https://web.dev/learn/design/responsive-images/#sizes
+     * -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes
+     **/
+    sizes: {
+        type: StringConstructor;
+    };
+    /**
+     * When true, the image will be considered high priority. Lazy loading is automatically disabled, and fetchpriority="high" is added to the image.
+     * You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.
+     * Should only be used when the image is visible above the fold.
+     **/
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * If `data` does not contain `srcSet`, the candidates for the `srcset` of the image will be auto-generated based on these width multipliers
+     *
+     * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+     **/
+    srcSetCandidates: {
+        type: ArrayConstructor;
+        validator: (values: any[]) => values is number[];
+        default: () => number[];
+    };
 }>>, {
     explicitWidth: boolean;
     lazyLoad: boolean;
@@ -183,6 +253,9 @@ declare const Image: vue_demi.DefineComponent<{
     rootStyle: Record<string, any>;
     pictureStyle: Record<string, any>;
     layout: string;
+    usePlaceholder: boolean;
+    priority: boolean;
+    srcSetCandidates: unknown[];
 }>;
 declare const DatocmsImagePlugin: {
     install: (Vue: any) => void;

package/dist/index.esm.mjs

@@ -21,8 +21,7 @@ const useInView = ({ threshold, rootMargin }) => {
     if (isIntersectionObserverAvailable()) {
       observer.value = new IntersectionObserver(
         (entries) => {
-          const image = entries[0];
-          if (image.isIntersecting && observer.value) {
+          if (entries.some(({ isIntersecting }) => isIntersecting) && observer.value) {
             inView.value = true;
             observer.value.disconnect();
           }
@@ -185,6 +184,36 @@ const imageShowStrategy = ({ lazyLoad, loaded }) => {
   }
   return true;
 };
+const buildSrcSet = (src, width, candidateMultipliers) => {
+  if (!src || !width) {
+    return void 0;
+  }
+  return candidateMultipliers.map((multiplier) => {
+    const url = new URL(src);
+    if (multiplier !== 1) {
+      url.searchParams.set("dpr", `${multiplier}`);
+      const maxH = url.searchParams.get("max-h");
+      const maxW = url.searchParams.get("max-w");
+      if (maxH) {
+        url.searchParams.set(
+          "max-h",
+          `${Math.floor(parseInt(maxH) * multiplier)}`
+        );
+      }
+      if (maxW) {
+        url.searchParams.set(
+          "max-w",
+          `${Math.floor(parseInt(maxW) * multiplier)}`
+        );
+      }
+    }
+    const finalWidth = Math.floor(width * multiplier);
+    if (finalWidth < 50) {
+      return null;
+    }
+    return `${url.toString()} ${finalWidth}w`;
+  }).filter(Boolean).join(",");
+};
 const Image = defineComponent({
   name: "DatocmsImage",
   props: {
@@ -234,6 +263,24 @@ const Image = defineComponent({
     },
     objectPosition: {
       type: String
+    },
+    usePlaceholder: {
+      type: Boolean,
+      default: true
+    },
+    sizes: {
+      type: String
+    },
+    priority: {
+      type: Boolean,
+      default: false
+    },
+    srcSetCandidates: {
+      type: Array,
+      validator: (values) => values.every((value) => {
+        return typeof value === "number";
+      }),
+      default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
     }
   },
   setup(props) {
@@ -245,21 +292,33 @@ const Image = defineComponent({
       threshold: props.intersectionThreshold || props.intersectionTreshold || 0,
       rootMargin: props.intersectionMargin || "0px 0px 0px 0px"
     });
+    const computedLazyLoad = ref(props.priority ? false : props.lazyLoad);
+    const imageRef = ref();
+    watchEffect(() => {
+      if (!imageRef.value) {
+        return;
+      }
+      if (imageRef.value.complete && imageRef.value.naturalWidth) {
+        handleLoad();
+      }
+    });
     return {
       inView,
       elRef,
       loaded,
-      handleLoad
+      handleLoad,
+      computedLazyLoad,
+      imageRef
     };
   },
   render() {
     const addImage = imageAddStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
     const showImage = imageShowStrategy({
-      lazyLoad: this.lazyLoad,
+      lazyLoad: this.computedLazyLoad,
       inView: this.inView,
       loaded: this.loaded
     });
@@ -267,30 +326,30 @@ const Image = defineComponent({
       ...isVue2 && {
         props: {
           srcset: this.data.webpSrcSet,
-          sizes: this.data.sizes,
+          sizes: this.sizes ?? this.data.sizes ?? void 0,
           type: "image/webp"
         }
       },
       ...isVue3 && {
         srcset: this.data.webpSrcSet,
-        sizes: this.data.sizes,
+        sizes: this.sizes ?? this.data.sizes ?? void 0,
         type: "image/webp"
       }
     });
     const regularSource = this.data.srcSet && h(Source, {
       ...isVue2 && {
         props: {
-          srcset: this.data.srcSet,
-          sizes: this.data.sizes
+          srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+          sizes: this.sizes ?? this.data.sizes ?? void 0
         }
       },
       ...isVue3 && {
-        srcset: this.data.srcSet,
-        sizes: this.data.sizes
+        srcset: this.data.srcSet ?? buildSrcSet(this.data.src, this.data.width, this.srcSetCandidates),
+        sizes: this.sizes ?? this.data.sizes ?? void 0
       }
     });
     const transition = typeof this.fadeInDuration === "undefined" || this.fadeInDuration > 0 ? `opacity ${this.fadeInDuration || 500}ms ${this.fadeInDuration || 500}ms` : void 0;
-    const placeholder = h("div", {
+    const placeholder = this.usePlaceholder && (this.data.bgColor || this.data.base64) ? h("div", {
       style: {
         backgroundImage: this.data.base64 ? `url(${this.data.base64})` : null,
         backgroundColor: this.data.bgColor,
@@ -299,11 +358,15 @@ const Image = defineComponent({
         objectFit: this.objectFit,
         objectPosition: this.objectPosition,
         transition,
-        ...absolutePositioning
+        position: "absolute",
+        left: "-5%",
+        top: "-5%",
+        width: "110%",
+        height: "110%"
       }
-    });
+    }) : null;
     const { width, aspectRatio } = this.data;
-    const height = this.data.height || width / aspectRatio;
+    const height = this.data.height ?? (aspectRatio ? width / aspectRatio : 0);
     const sizer = this.layout !== "fill" ? h(Sizer, {
       ...isVue2 && {
         props: {
@@ -344,7 +407,8 @@ const Image = defineComponent({
               attrs: {
                 src: this.data.src,
                 alt: this.data.alt,
-                title: this.data.title
+                title: this.data.title,
+                fetchpriority: this.priority ? "high" : void 0
               },
               on: {
                 load: this.handleLoad
@@ -354,16 +418,18 @@ const Image = defineComponent({
               src: this.data.src,
               alt: this.data.alt,
               title: this.data.title,
+              fetchpriority: this.priority ? "high" : void 0,
               onLoad: this.handleLoad
             },
+            ref: "imageRef",
             class: this.pictureClass,
             style: {
-              ...absolutePositioning,
-              ...this.pictureStyle,
               opacity: showImage ? 1 : 0,
               transition,
+              ...absolutePositioning,
               objectFit: this.objectFit,
-              objectPosition: this.objectPosition
+              objectPosition: this.objectPosition,
+              ...this.pictureStyle
             }
           })
         ]),
@@ -385,8 +451,14 @@ const Image = defineComponent({
                   alt: this.data.alt,
                   title: this.data.title,
                   class: this.pictureClass,
-                  style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                  loading: "lazy"
+                  style: toCss({
+                    ...absolutePositioning,
+                    objectFit: this.objectFit,
+                    objectPosition: this.objectPosition,
+                    ...this.pictureStyle
+                  }),
+                  loading: this.computedLazyLoad ? "lazy" : void 0,
+                  fetchpriority: this.priority ? "high" : void 0
                 })
               ])
             }
@@ -408,7 +480,8 @@ const Image = defineComponent({
                 title: this.data.title,
                 class: this.pictureClass,
                 style: toCss({ ...this.pictureStyle, ...absolutePositioning }),
-                loading: "lazy"
+                loading: this.computedLazyLoad ? "lazy" : void 0,
+                fetchpriority: this.priority ? "high" : void 0
               })
             ])
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "3.0.2",
+  "version": "4.0.0",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",
@@ -11,7 +11,16 @@
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.mjs",
   "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/datocms/vue-datocms.git"
+  },
   "license": "MIT",
+  "author": "Stefano Verna <s.verna@datocms.com>",
+  "contributors": [
+    "Silvano Stralla <silvano@datocms.com>"
+  ],
+  "homepage": "https://github.com/datocms/vue-datocms",
   "exports": {
     ".": {
       "import": "./dist/index.esm.mjs",