diff --git a/src/components/Image/README.md b/src/components/Image/README.md index 7a691c2..e04ce7e 100644 --- a/src/components/Image/README.md +++ b/src/components/Image/README.md @@ -174,8 +174,10 @@ Here's a complete recap of what `responsiveImage` offers: | prop | type | default | required | description | | ------------------ | ------------------------ | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query **** | -| class | string | null | :x: | Additional CSS class for image | -| style | CSS properties | null | :x: | Additional CSS rules to add to the image | +| picture-class | string | null | :x: | Additional CSS class for the root `` tag | +| picture-style | CSS properties | null | :x: | Additional CSS rules to add to the root `` tag | +| img-class | string | null | :x: | Additional CSS class for the `` tag | +| img-style | CSS properties | null | :x: | Additional CSS rules to add to the `` tag | | priority | Boolean | false | :x: | Disables lazy loading, and sets the image [fetchPriority](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority) to "high" | | sizes | string | undefined | :x: | The HTML5 [`sizes`](https://web.dev/learn/design/responsive-images/#sizes) attribute for the image (will be used `data.sizes` as a fallback) | | use-placeholder | Boolean | true | :x: | Whether the image should use a blurred image placeholder | diff --git a/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap b/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap index b2cc027..95080b3 100644 --- a/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap +++ b/src/components/NakedImage/__tests__/__snapshots__/index.test.ts.snap @@ -29,9 +29,9 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = ` `; exports[`Image passing class and/or style renders correctly 1`] = ` - + - + `; diff --git a/src/components/NakedImage/__tests__/index.test.ts b/src/components/NakedImage/__tests__/index.test.ts index 2137bdb..a2bccc1 100644 --- a/src/components/NakedImage/__tests__/index.test.ts +++ b/src/components/NakedImage/__tests__/index.test.ts @@ -70,8 +70,10 @@ describe('Image', () => { const wrapper = mount(NakedImage, { propsData: { data: minimalData, - class: 'class-name', - style: { border: '1px solid red' }, + pictureClass: 'picture-class-name', + pictureStyle: { border: '1px solid red' }, + imgClass: 'img-class-name', + imgStyle: { border: '1px solid green' }, }, }); diff --git a/src/components/NakedImage/index.ts b/src/components/NakedImage/index.ts index b964d1d..27e74e0 100644 --- a/src/components/NakedImage/index.ts +++ b/src/components/NakedImage/index.ts @@ -43,12 +43,30 @@ export const NakedImage = defineComponent({ **/ srcSetCandidates: { type: Array, - validator: (values: any[]): values is number[] => + validator: (values: unknown[]): values is number[] => values.every((value): value is number => { return typeof value === 'number'; }), default: () => [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4], }, + /** Additional CSS class for the root `` tag */ + pictureClass: { + type: String, + }, + /** Additional CSS rules to add to the root `` tag */ + pictureStyle: { + type: Object, + default: () => ({}), + }, + /** Additional CSS class for the `` tag */ + imgClass: { + type: String, + }, + /** Additional CSS rules to add to the `` tag */ + imgStyle: { + type: Object, + default: () => ({}), + }, }, setup(_props, { emit, expose }) { const loaded = ref(false); @@ -118,26 +136,33 @@ export const NakedImage = defineComponent({ } : undefined; - 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' : undefined, - loading: this.priority ? undefined : 'lazy', - style: { - ...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' : undefined, + loading: this.priority ? undefined : 'lazy', + style: { + ...placeholderStyle, + ...sizingStyle, + ...(this.imgStyle || {}), + }, + class: this.imgClass, + }), + ], + ); }, });