@datocms/svelte 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -156,8 +156,10 @@ Here's a complete recap of what `responsiveImage` offers:
|
|
|
156
156
|
| prop | type | default | required | description |
|
|
157
157
|
| ---------------- | ------------------------ | ---------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
158
158
|
| data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query \*\*\*\* |
|
|
159
|
-
|
|
|
160
|
-
|
|
|
159
|
+
| pictureClass | string | null | :x: | Additional CSS class for the root `<picture>` tag |
|
|
160
|
+
| pictureStyle | CSS properties | null | :x: | Additional CSS rules to add to the root `<picture>` tag |
|
|
161
|
+
| imgClass | string | null | :x: | Additional CSS class for the `<img>` tag |
|
|
162
|
+
| imgCtyle | CSS properties | null | :x: | Additional CSS rules to add to the `<img>` tag |
|
|
161
163
|
| 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" |
|
|
162
164
|
| 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) |
|
|
163
165
|
| usePlaceholder | Boolean | true | :x: | Whether the image should use a blurred image placeholder |
|
|
@@ -6,9 +6,10 @@ import {
|
|
|
6
6
|
parseStyleAttributes
|
|
7
7
|
} from "./utils";
|
|
8
8
|
export let data;
|
|
9
|
-
let
|
|
10
|
-
export
|
|
11
|
-
export let
|
|
9
|
+
export let pictureClass = null;
|
|
10
|
+
export let pictureStyle = null;
|
|
11
|
+
export let imgClass = null;
|
|
12
|
+
export let imgStyle = null;
|
|
12
13
|
export let usePlaceholder = true;
|
|
13
14
|
export let sizes = null;
|
|
14
15
|
export let priority = false;
|
|
@@ -38,7 +39,7 @@ $:
|
|
|
38
39
|
};
|
|
39
40
|
</script>
|
|
40
41
|
|
|
41
|
-
<picture data-testid="picture">
|
|
42
|
+
<picture data-testid="picture" class={pictureClass} {pictureStyle}>
|
|
42
43
|
{#if data.webpSrcSet}
|
|
43
44
|
<source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
|
|
44
45
|
{/if}
|
|
@@ -59,11 +60,11 @@ $:
|
|
|
59
60
|
fetchpriority: priority ? 'high' : undefined
|
|
60
61
|
})}
|
|
61
62
|
loading={priority ? undefined : 'lazy'}
|
|
62
|
-
class={
|
|
63
|
+
class={imgClass}
|
|
63
64
|
style={dumpStyleAttributes({
|
|
64
65
|
...placeholderStyle,
|
|
65
66
|
...sizingStyle,
|
|
66
|
-
...parseStyleAttributes(
|
|
67
|
+
...parseStyleAttributes(imgStyle)
|
|
67
68
|
})}
|
|
68
69
|
data-testid="img"
|
|
69
70
|
/>
|
|
@@ -3,8 +3,10 @@ import { type ResponsiveImageType } from './utils';
|
|
|
3
3
|
declare const __propDef: {
|
|
4
4
|
props: {
|
|
5
5
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
|
|
6
|
-
/** Additional CSS className for root
|
|
7
|
-
/** Additional CSS rules to add to the root
|
|
6
|
+
/** Additional CSS className for the root <picture> tag */ pictureClass?: string | null | undefined;
|
|
7
|
+
/** Additional CSS rules to add to the root <picture> tag */ pictureStyle?: string | null | undefined;
|
|
8
|
+
/** Additional CSS className for the <img> tag */ imgClass?: string | null | undefined;
|
|
9
|
+
/** Additional CSS rules to add to the <img> tag */ imgStyle?: string | null | undefined;
|
|
8
10
|
/** Whether the component should use a blurred image placeholder */ usePlaceholder?: boolean | undefined;
|
|
9
11
|
/**
|
|
10
12
|
* The HTML5 `sizes` attribute for the image
|