@datocms/svelte 2.0.3 → 3.0.0
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.
|
@@ -11,12 +11,14 @@ export let data;
|
|
|
11
11
|
let rootClass = null;
|
|
12
12
|
export { rootClass as class };
|
|
13
13
|
export let pictureClass = null;
|
|
14
|
+
export let imgClass = null;
|
|
14
15
|
export let placeholderClass = null;
|
|
15
16
|
export let fadeInDuration = 500;
|
|
16
17
|
export let intersectionThreshold = 0;
|
|
17
18
|
export let intersectionMargin = "0px";
|
|
18
19
|
export let style = null;
|
|
19
20
|
export let pictureStyle = null;
|
|
21
|
+
export let imgStyle = null;
|
|
20
22
|
export let placeholderStyle = null;
|
|
21
23
|
export let layout = "intrinsic";
|
|
22
24
|
export let objectFit = void 0;
|
|
@@ -48,7 +50,7 @@ $:
|
|
|
48
50
|
left: "-5%",
|
|
49
51
|
top: "-5%",
|
|
50
52
|
width: "110%",
|
|
51
|
-
height: "auto",
|
|
53
|
+
height: data.base64 ? "auto" : "100%",
|
|
52
54
|
"max-width": "none",
|
|
53
55
|
"max-height": "none",
|
|
54
56
|
...parseStyleAttributes(placeholderStyle)
|
|
@@ -85,11 +87,11 @@ $:
|
|
|
85
87
|
>
|
|
86
88
|
{#if layout !== 'fill'}
|
|
87
89
|
<img
|
|
88
|
-
class={
|
|
90
|
+
class={imgClass}
|
|
89
91
|
style={dumpStyleAttributes({
|
|
90
92
|
display: 'block',
|
|
91
93
|
width: '100%',
|
|
92
|
-
...parseStyleAttributes(
|
|
94
|
+
...parseStyleAttributes(imgStyle)
|
|
93
95
|
})}
|
|
94
96
|
src={`data:image/svg+xml;base64,${universalBtoa(svg)}`}
|
|
95
97
|
aria-hidden="true"
|
|
@@ -122,7 +124,7 @@ $:
|
|
|
122
124
|
{/if}
|
|
123
125
|
|
|
124
126
|
{#if addImage}
|
|
125
|
-
<picture data-testid="picture">
|
|
127
|
+
<picture data-testid="picture" class={pictureClass} style={pictureStyle}>
|
|
126
128
|
{#if data.webpSrcSet}
|
|
127
129
|
<source srcset={data.webpSrcSet} sizes={sizes ?? data.sizes ?? null} type="image/webp" />
|
|
128
130
|
{/if}
|
|
@@ -142,14 +144,14 @@ $:
|
|
|
142
144
|
{...noTypeCheck({
|
|
143
145
|
fetchpriority: priority ? 'high' : undefined
|
|
144
146
|
})}
|
|
145
|
-
class={
|
|
147
|
+
class={imgClass}
|
|
146
148
|
style={dumpStyleAttributes({
|
|
147
149
|
opacity: showImage ? 1 : 0,
|
|
148
150
|
transition,
|
|
149
151
|
...absolutePositioning,
|
|
150
152
|
'object-fit': objectFit,
|
|
151
153
|
'object-position': objectPosition,
|
|
152
|
-
...parseStyleAttributes(
|
|
154
|
+
...parseStyleAttributes(imgStyle)
|
|
153
155
|
})}
|
|
154
156
|
data-testid="img"
|
|
155
157
|
/>
|
|
@@ -5,13 +5,15 @@ declare const __propDef: {
|
|
|
5
5
|
props: {
|
|
6
6
|
/** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */ data: ResponsiveImageType;
|
|
7
7
|
/** Additional CSS className for root node */ class?: string | null | undefined;
|
|
8
|
-
/** Additional CSS class for the
|
|
8
|
+
/** Additional CSS class for the `<picture />` tag */ pictureClass?: string | null | undefined;
|
|
9
|
+
/** Additional CSS class for the image inside the `<picture />` tag */ imgClass?: string | null | undefined;
|
|
9
10
|
/** Additional CSS class for the placeholder element */ placeholderClass?: string | null | undefined;
|
|
10
11
|
/** Duration (in ms) of the fade-in transition effect upoad image loading */ fadeInDuration?: number | undefined;
|
|
11
12
|
/** Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible */ intersectionThreshold?: number | undefined;
|
|
12
13
|
/** Margin around the placeholder. Can have values similar to the CSS margin property (top, right, bottom, left). The values can be percentages. This set of values serves to grow or shrink each side of the placeholder element's bounding box before computing intersections */ intersectionMargin?: string | undefined;
|
|
13
14
|
/** Additional CSS rules to add to the root node */ style?: string | null | undefined;
|
|
14
|
-
/** Additional CSS rules to add to the
|
|
15
|
+
/** Additional CSS rules to add to the `<picture />` tag */ pictureStyle?: string | null | undefined;
|
|
16
|
+
/** Additional CSS rules to add to the image inside the `<picture />` tag */ imgStyle?: string | null | undefined;
|
|
15
17
|
/** Additional CSS rules to add to the placeholder element */ placeholderStyle?: string | null | undefined;
|
|
16
18
|
/**
|
|
17
19
|
* The layout behavior of the image as the viewport changes size
|
|
@@ -180,6 +180,8 @@ Here's a complete recap of what `responsiveImage` offers:
|
|
|
180
180
|
| style | string | null | :x: | Additional CSS rules to add to the root node |
|
|
181
181
|
| pictureClass | string | null | :x: | Additional CSS class for the inner `<picture />` tag |
|
|
182
182
|
| pictureStyle | string | null | :x: | Additional CSS rules to add to the inner `<picture />` tag |
|
|
183
|
+
| imgClass | string | null | :x: | Additional CSS class for the image inside the `<picture />` tag |
|
|
184
|
+
| imgStyle | string | null | :x: | Additional CSS rules to add to the image inside the `<picture />` tag |
|
|
183
185
|
| layout | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | "intrinsic" | :x: | The layout behavior of the image as the viewport changes size |
|
|
184
186
|
| fadeInDuration | integer | 500 | :x: | Duration (in ms) of the fade-in transition effect upoad image loading |
|
|
185
187
|
| intersectionThreshold | float | 0 | :x: | Indicate at what percentage of the placeholder visibility the loading of the image should be triggered. A value of 0 means that as soon as even one pixel is visible, the callback will be run. A value of 1.0 means that the threshold isn't considered passed until every pixel is visible. |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datocms/svelte",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A set of components and utilities to work faster with DatoCMS in Svelte",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
},
|
|
66
66
|
"type": "module",
|
|
67
67
|
"dependencies": {
|
|
68
|
-
"datocms-structured-text-utils": "^
|
|
68
|
+
"datocms-structured-text-utils": "^4.0.1",
|
|
69
69
|
"svelte-intersection-observer": "^1.0.0"
|
|
70
70
|
},
|
|
71
71
|
"exports": {
|