vue-datocms 7.0.0 → 7.0.2

package/README.md

@@ -91,8 +91,7 @@ Trusted by over 25,000 enterprise businesses, agency partners, and individuals a
 - [datocms/js-rest-api-clients](https://github.com/datocms/js-rest-api-clients): Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our [GraphQL Content Delivery API](https://www.datocms.com/docs/content-delivery-api) instead.
 - [datocms/cli](https://github.com/datocms/cli): Command-line interface that includes our [Contentful importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-contentful) and [Wordpress importer](https://github.com/datocms/cli/tree/main/packages/cli-plugin-wordpress)
 - [datocms/plugins](https://github.com/datocms/plugins): Example plugins we've made that extend the editor/admin dashboard
-- [datocms/gatsby-source-datocms](https://github.com/datocms/gatsby-source-datocms): Our Gatsby source plugin to pull data from DatoCMS
-- Frontend examples in different frameworks: [Next.js](https://github.com/datocms/nextjs-demo), [Vue](https://github.com/datocms/vue-datocms) and [Nuxt](https://github.com/datocms/nuxtjs-demo), [Svelte](https://github.com/datocms/datocms-svelte) and [SvelteKit](https://github.com/datocms/sveltekit-demo), [Astro](https://github.com/datocms/datocms-astro-blog-demo), [Remix](https://github.com/datocms/remix-example). See [all our starter templates](https://www.datocms.com/marketplace/starters).
+- [DatoCMS Starters](https://www.datocms.com/marketplace/starters) has examples for various Javascript frontend frameworks
 
 Or see [all our public repos](https://github.com/orgs/datocms/repositories?q=&type=public&language=&sort=stargazers)
 <!--datocms-autoinclude-footer end-->

package/dist/index.cjs.js

@@ -547,6 +547,20 @@ const NakedImage = vue.defineComponent({
         return typeof value === "number";
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+    },
+    pictureClass: {
+      type: String
+    },
+    pictureStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    imgClass: {
+      type: String
+    },
+    imgStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup(_props, { emit, expose }) {
@@ -599,21 +613,28 @@ const NakedImage = vue.defineComponent({
       backgroundColor: this.data.bgColor,
       color: "transparent"
     } : void 0;
-    return vue.h("picture", null, [
-      webpSource,
-      regularSource,
-      this.data.src && vue.h("img", {
-        ref: "imageRef",
-        src: this.data.src,
-        alt: this.data.alt,
-        onLoad: this.handleLoad,
-        title: this.data.title,
-        fetchpriority: this.priority ? "high" : void 0,
-        loading: this.priority ? void 0 : "lazy",
-        style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.$attrs.style || {}),
-        class: this.$attrs.class
-      })
-    ]);
+    return vue.h(
+      "picture",
+      {
+        style: this.pictureStyle,
+        class: this.pictureClass
+      },
+      [
+        webpSource,
+        regularSource,
+        this.data.src && vue.h("img", {
+          ref: "imageRef",
+          src: this.data.src,
+          alt: this.data.alt,
+          onLoad: this.handleLoad,
+          title: this.data.title,
+          fetchpriority: this.priority ? "high" : void 0,
+          loading: this.priority ? void 0 : "lazy",
+          style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
+          class: this.imgClass
+        })
+      ]
+    );
   }
 });
 const DatocmsNakedImagePlugin = {

package/dist/index.d.ts

@@ -9,29 +9,30 @@ import { StreamTypes, MaxResolutionValue, MinResolutionValue, CmcdTypes, Playbac
 import MuxPlayerElement, { Tokens } from '@mux/mux-player';
 import { Options, ConnectionStatus } from 'datocms-listen';
 
+type Maybe$2<T> = T | null;
 type ResponsiveImageType = {
-    /** The aspect ratio (width/height) of the image */
-    aspectRatio?: number;
     /** A base64-encoded thumbnail to offer during image loading */
-    base64?: string;
+    base64?: Maybe$2<string>;
     /** The height of the image */
-    height?: number;
+    height?: Maybe$2<number>;
     /** The width of the image */
     width: number;
+    /** The aspect ratio (width/height) of the image */
+    aspectRatio?: number;
     /** The HTML5 `sizes` attribute for the image */
-    sizes?: string;
+    sizes?: Maybe$2<string>;
     /** The fallback `src` attribute for the image */
-    src?: string;
+    src?: Maybe$2<string>;
     /** The HTML5 `srcSet` attribute for the image */
-    srcSet?: string;
+    srcSet?: Maybe$2<string>;
     /** The HTML5 `srcSet` attribute for the image in WebP format, for browsers that support the format */
-    webpSrcSet?: string;
+    webpSrcSet?: Maybe$2<string>;
     /** The background color for the image placeholder */
-    bgColor?: string;
+    bgColor?: Maybe$2<string>;
     /** Alternate text (`alt`) for the image */
-    alt?: string;
+    alt?: Maybe$2<string>;
     /** Title attribute (`title`) for the image */
-    title?: string;
+    title?: Maybe$2<string>;
 };
 declare const Image: vue.DefineComponent<{
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
@@ -309,9 +310,27 @@ declare const NakedImage: vue.DefineComponent<{
      **/
     srcSetCandidates: {
         type: ArrayConstructor;
-        validator: (values: any[]) => values is number[];
+        validator: (values: unknown[]) => values is number[];
         default: () => number[];
     };
+    /** Additional CSS class for the root `<picture />` tag */
+    pictureClass: {
+        type: StringConstructor;
+    };
+    /** Additional CSS rules to add to the root `<picture />` tag */
+    pictureStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /** Additional CSS class for the `<img />` tag */
+    imgClass: {
+        type: StringConstructor;
+    };
+    /** Additional CSS rules to add to the `<img />` tag */
+    imgStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     loaded: vue.Ref<boolean>;
     handleLoad: () => void;
@@ -353,11 +372,31 @@ declare const NakedImage: vue.DefineComponent<{
      **/
     srcSetCandidates: {
         type: ArrayConstructor;
-        validator: (values: any[]) => values is number[];
+        validator: (values: unknown[]) => values is number[];
         default: () => number[];
     };
+    /** Additional CSS class for the root `<picture />` tag */
+    pictureClass: {
+        type: StringConstructor;
+    };
+    /** Additional CSS rules to add to the root `<picture />` tag */
+    pictureStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    /** Additional CSS class for the `<img />` tag */
+    imgClass: {
+        type: StringConstructor;
+    };
+    /** Additional CSS rules to add to the `<img />` tag */
+    imgStyle: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>>, {
     priority: boolean;
+    pictureStyle: Record<string, any>;
+    imgStyle: Record<string, any>;
     usePlaceholder: boolean;
     srcSetCandidates: unknown[];
 }, {}>;

package/dist/index.esm.mjs

@@ -523,6 +523,20 @@ const NakedImage = defineComponent({
         return typeof value === "number";
       }),
       default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
+    },
+    pictureClass: {
+      type: String
+    },
+    pictureStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    imgClass: {
+      type: String
+    },
+    imgStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
   setup(_props, { emit, expose }) {
@@ -575,21 +589,28 @@ const NakedImage = defineComponent({
       backgroundColor: this.data.bgColor,
       color: "transparent"
     } : void 0;
-    return h("picture", null, [
-      webpSource,
-      regularSource,
-      this.data.src && h("img", {
-        ref: "imageRef",
-        src: this.data.src,
-        alt: this.data.alt,
-        onLoad: this.handleLoad,
-        title: this.data.title,
-        fetchpriority: this.priority ? "high" : void 0,
-        loading: this.priority ? void 0 : "lazy",
-        style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.$attrs.style || {}),
-        class: this.$attrs.class
-      })
-    ]);
+    return h(
+      "picture",
+      {
+        style: this.pictureStyle,
+        class: this.pictureClass
+      },
+      [
+        webpSource,
+        regularSource,
+        this.data.src && h("img", {
+          ref: "imageRef",
+          src: this.data.src,
+          alt: this.data.alt,
+          onLoad: this.handleLoad,
+          title: this.data.title,
+          fetchpriority: this.priority ? "high" : void 0,
+          loading: this.priority ? void 0 : "lazy",
+          style: __spreadValues$4(__spreadValues$4(__spreadValues$4({}, placeholderStyle), sizingStyle), this.imgStyle || {}),
+          class: this.imgClass
+        })
+      ]
+    );
   }
 });
 const DatocmsNakedImagePlugin = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-datocms",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",