vue-datocms 7.0.0 → 7.0.1

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

@@ -309,9 +309,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 +371,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.1",
   "description": "A set of components and utilities to work faster with DatoCMS in Vue.js environments",
   "keywords": [
     "datocms",