vue-datocms 5.1.2 → 6.0.2

package/dist/index.d.ts

@@ -43,6 +43,10 @@ declare const Image: vue.DefineComponent<{
     pictureClass: {
         type: StringConstructor;
     };
+    /** Additional CSS class for the placeholder image */
+    placeholderClass: {
+        type: StringConstructor;
+    };
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
     fadeInDuration: {
         type: NumberConstructor;
@@ -61,24 +65,15 @@ declare const Image: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    /** Wheter enable lazy loading or not */
-    lazyLoad: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Additional CSS rules to add to the root node */
-    rootStyle: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle: {
         type: ObjectConstructor;
         default: () => {};
     };
-    /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */
-    explicitWidth: {
-        type: BooleanConstructor;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle: {
+        type: ObjectConstructor;
+        default: () => {};
     };
     /**
      * The layout behavior of the image as the viewport changes size
@@ -87,7 +82,7 @@ declare const Image: vue.DefineComponent<{
      *
      * * `intrinsic`: the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
      * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
-     * * `responsive` (default): the image will sscasle the dimensions down for smaller viewports and scale up for larger viewports
+     * * `responsive` (default): the image will scale the dimensions down for smaller viewports and scale up for larger viewports
      * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
      **/
     layout: {
@@ -139,12 +134,11 @@ declare const Image: vue.DefineComponent<{
     };
 }, {
     inView: vue.Ref<boolean>;
-    elRef: vue.Ref<HTMLElement | null>;
+    rootRef: vue.Ref<HTMLElement | null>;
     loaded: vue.Ref<boolean>;
     handleLoad: () => void;
-    computedLazyLoad: vue.Ref<boolean>;
     imageRef: vue.Ref<HTMLImageElement | undefined>;
-}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "load"[], "load", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: {
         type: PropType<ResponsiveImageType>;
@@ -154,6 +148,10 @@ declare const Image: vue.DefineComponent<{
     pictureClass: {
         type: StringConstructor;
     };
+    /** Additional CSS class for the placeholder image */
+    placeholderClass: {
+        type: StringConstructor;
+    };
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
     fadeInDuration: {
         type: NumberConstructor;
@@ -172,24 +170,15 @@ declare const Image: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
-    /** Wheter enable lazy loading or not */
-    lazyLoad: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /** Additional CSS rules to add to the root node */
-    rootStyle: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle: {
         type: ObjectConstructor;
         default: () => {};
     };
-    /** Wheter the image wrapper should explicitely declare the width of the image or keep it fluid */
-    explicitWidth: {
-        type: BooleanConstructor;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle: {
+        type: ObjectConstructor;
+        default: () => {};
     };
     /**
      * The layout behavior of the image as the viewport changes size
@@ -198,7 +187,7 @@ declare const Image: vue.DefineComponent<{
      *
      * * `intrinsic`: the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
      * * `fixed`: the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element
-     * * `responsive` (default): the image will sscasle the dimensions down for smaller viewports and scale up for larger viewports
+     * * `responsive` (default): the image will scale the dimensions down for smaller viewports and scale up for larger viewports
      * * `fill`: image will stretch both width and height to the dimensions of the parent element, provided the parent element is `relative`
      **/
     layout: {
@@ -248,22 +237,115 @@ declare const Image: vue.DefineComponent<{
         validator: (values: any[]) => values is number[];
         default: () => number[];
     };
-}>>, {
-    explicitWidth: boolean;
-    lazyLoad: boolean;
+}>> & {
+    onLoad?: ((...args: any[]) => any) | undefined;
+}, {
+    priority: boolean;
     intersectionTreshold: number;
     intersectionMargin: string;
-    rootStyle: Record<string, any>;
     pictureStyle: Record<string, any>;
+    placeholderStyle: Record<string, any>;
     layout: string;
     usePlaceholder: boolean;
-    priority: boolean;
     srcSetCandidates: unknown[];
 }, {}>;
 declare const DatocmsImagePlugin: {
     install: (Vue: any) => void;
 };
 
+declare const NakedImage: vue.DefineComponent<{
+    /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+    data: {
+        type: PropType<ResponsiveImageType>;
+        required: true;
+    };
+    /** 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[];
+    };
+}, {
+    loaded: vue.Ref<boolean>;
+    handleLoad: () => void;
+    imageRef: vue.Ref<HTMLImageElement | undefined>;
+}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
+    data: {
+        type: PropType<ResponsiveImageType>;
+        required: true;
+    };
+    /** 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[];
+    };
+}>>, {
+    priority: boolean;
+    usePlaceholder: boolean;
+    srcSetCandidates: unknown[];
+}, {}>;
+declare const DatocmsNakedImagePlugin: {
+    install: (Vue: any) => void;
+};
+
 type AdapterReturn = VNode | string | null;
 declare const defaultAdapter: {
     renderNode: (tagName: string, props?: VNodeProps, childOrChildren?: AdapterReturn | AdapterReturn[]) => AdapterReturn;
@@ -1148,4 +1230,4 @@ declare const toHead: (...args: ToMetaTagsType[]) => {
     }[];
 };
 
-export { DatocmsImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };
+export { DatocmsImagePlugin, DatocmsNakedImagePlugin, DatocmsStructuredTextPlugin, DatocmsVideoPlayerPlugin, DisabledQueryListenerOptions, EnabledQueryListenerOptions, GenericClient, Image, NakedImage, QueryListenerOptions, RawSearchResult, RenderBlockContext, RenderInlineRecordContext, RenderRecordLinkContext, ResponsiveImageType, SeoMetaTagType, StructuredText, SubscribeToQueryOptions, ToMetaTagsType, UseSiteSearchConfig, UseSiteSearchData, UseSiteSearchResult, Video, VideoPlayer, appendKeyToValidElement, defaultAdapter, isKeyOf, isNil, toHead, toNativeAttrName, toNativeAttrValue, useQuerySubscription, useSiteSearch, useVideoPlayer };