@datocms/svelte 1.4.2 → 2.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.
- package/package/components/Image/Image.svelte +37 -10
- package/package/components/Image/Image.svelte.d.ts +2 -2
- package/package/components/Image/Placeholder.svelte +3 -3
- package/package/components/Image/README.md +42 -39
- package/package/components/StructuredText/nodes/Span.svelte +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
<script context="module">import IntersectionObserver from "svelte-intersection-observer";
|
|
2
2
|
const isWindowDefined = typeof window !== "undefined";
|
|
3
|
+
const parseStyleAttributes = (styleString) => {
|
|
4
|
+
const styleRules = {};
|
|
5
|
+
styleString.split(";").forEach((rule) => {
|
|
6
|
+
const [key, value] = rule.split(":").map((part) => part.trim());
|
|
7
|
+
if (key && value) {
|
|
8
|
+
styleRules[key] = value;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
return styleRules;
|
|
12
|
+
};
|
|
3
13
|
const noTypeCheck = (x) => x;
|
|
4
14
|
const imageAddStrategy = ({ lazyLoad, intersecting, loaded }) => {
|
|
5
15
|
const isIntersectionObserverAvailable = isWindowDefined ? !!window.IntersectionObserver : false;
|
|
@@ -39,10 +49,10 @@ const buildSrcSet = (src, width, candidateMultipliers) => {
|
|
|
39
49
|
const maxH = url.searchParams.get("max-h");
|
|
40
50
|
const maxW = url.searchParams.get("max-w");
|
|
41
51
|
if (maxH) {
|
|
42
|
-
url.searchParams.set("max-h", `${Math.floor(parseInt(maxH) * multiplier)}`);
|
|
52
|
+
url.searchParams.set("max-h", `${Math.floor(Number.parseInt(maxH) * multiplier)}`);
|
|
43
53
|
}
|
|
44
54
|
if (maxW) {
|
|
45
|
-
url.searchParams.set("max-w", `${Math.floor(parseInt(maxW) * multiplier)}`);
|
|
55
|
+
url.searchParams.set("max-w", `${Math.floor(Number.parseInt(maxW) * multiplier)}`);
|
|
46
56
|
}
|
|
47
57
|
}
|
|
48
58
|
const finalWidth = Math.floor(width * multiplier);
|
|
@@ -72,7 +82,7 @@ export let intersectionThreshold = 0;
|
|
|
72
82
|
export let intersectionMargin = "0px";
|
|
73
83
|
let rawLazyLoad = true;
|
|
74
84
|
export { rawLazyLoad as lazyLoad };
|
|
75
|
-
export let style =
|
|
85
|
+
export let style = null;
|
|
76
86
|
export let pictureStyle = null;
|
|
77
87
|
export let layout = "intrinsic";
|
|
78
88
|
export let objectFit = void 0;
|
|
@@ -97,6 +107,21 @@ $:
|
|
|
97
107
|
intersecting,
|
|
98
108
|
loaded
|
|
99
109
|
});
|
|
110
|
+
const absolutePositioning = {
|
|
111
|
+
position: "absolute",
|
|
112
|
+
left: 0,
|
|
113
|
+
top: 0,
|
|
114
|
+
width: "100%",
|
|
115
|
+
height: "100%",
|
|
116
|
+
"max-width": "none",
|
|
117
|
+
"max-height": "none"
|
|
118
|
+
};
|
|
119
|
+
$:
|
|
120
|
+
computedStyle = {
|
|
121
|
+
overflow: "hidden",
|
|
122
|
+
...layout === "fill" ? absolutePositioning : layout === "intrinsic" ? { position: "relative", width: "100%", "max-width": `${width}px` } : layout === "fixed" ? { position: "relative", width: `${width}px` } : { position: "relative", width: "100%" },
|
|
123
|
+
...parseStyleAttributes(style || "")
|
|
124
|
+
};
|
|
100
125
|
let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
|
|
101
126
|
</script>
|
|
102
127
|
|
|
@@ -109,11 +134,13 @@ let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
|
|
|
109
134
|
<div
|
|
110
135
|
bind:this={element}
|
|
111
136
|
class={klass}
|
|
112
|
-
style
|
|
113
|
-
style:
|
|
114
|
-
style:
|
|
115
|
-
style:
|
|
116
|
-
style:height={
|
|
137
|
+
{style}
|
|
138
|
+
style:overflow={computedStyle.overflow}
|
|
139
|
+
style:position={computedStyle.position}
|
|
140
|
+
style:width={computedStyle.width}
|
|
141
|
+
style:height={computedStyle.height}
|
|
142
|
+
style:max-width={computedStyle['max-width']}
|
|
143
|
+
style:max-height={computedStyle['max-height']}
|
|
117
144
|
data-testid="image"
|
|
118
145
|
>
|
|
119
146
|
{#if layout !== 'fill' && width}
|
|
@@ -161,8 +188,8 @@ let transition = fadeInDuration > 0 ? `opacity ${fadeInDuration}ms` : void 0;
|
|
|
161
188
|
style:top="0"
|
|
162
189
|
style:width="100%"
|
|
163
190
|
style:height="100%"
|
|
164
|
-
style:objectFit
|
|
165
|
-
style:objectPosition
|
|
191
|
+
style:object-fit={objectFit}
|
|
192
|
+
style:object-position={objectPosition}
|
|
166
193
|
data-testid="img"
|
|
167
194
|
/>
|
|
168
195
|
{/if}
|
|
@@ -6,7 +6,7 @@ export type ResponsiveImageType = {
|
|
|
6
6
|
/** The height of the image */
|
|
7
7
|
height?: Maybe<number>;
|
|
8
8
|
/** The width of the image */
|
|
9
|
-
width
|
|
9
|
+
width: number;
|
|
10
10
|
/** The aspect ratio (width/height) of the image */
|
|
11
11
|
aspectRatio?: number;
|
|
12
12
|
/** The HTML5 `sizes` attribute for the image */
|
|
@@ -35,7 +35,7 @@ declare const __propDef: {
|
|
|
35
35
|
/** 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;
|
|
36
36
|
/** 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;
|
|
37
37
|
/** Whether enable lazy loading or not */ lazyLoad?: boolean | undefined;
|
|
38
|
-
/** Additional CSS rules to add to the root node */ style?:
|
|
38
|
+
/** Additional CSS rules to add to the root node */ style?: string | null | undefined;
|
|
39
39
|
/** Additional CSS rules to add to the image inside the `<picture />` tag */ pictureStyle?: string | null | undefined;
|
|
40
40
|
/**
|
|
41
41
|
* The layout behavior of the image as the viewport changes size
|
|
@@ -13,9 +13,9 @@ let opacity = showImage ? 0 : 1;
|
|
|
13
13
|
aria-hidden="true"
|
|
14
14
|
alt=""
|
|
15
15
|
src={base64}
|
|
16
|
-
style:backgroundColor
|
|
17
|
-
style:objectFit
|
|
18
|
-
style:objectPosition
|
|
16
|
+
style:background-color={backgroundColor}
|
|
17
|
+
style:object-fit={objectFit}
|
|
18
|
+
style:object-position={objectPosition}
|
|
19
19
|
style:transition
|
|
20
20
|
style:opacity
|
|
21
21
|
/>
|
|
@@ -4,13 +4,16 @@
|
|
|
4
4
|
|
|
5
5
|
### Table of contents
|
|
6
6
|
|
|
7
|
-
- [
|
|
8
|
-
- [
|
|
9
|
-
- [
|
|
10
|
-
- [
|
|
11
|
-
- [
|
|
12
|
-
- [
|
|
13
|
-
- [
|
|
7
|
+
- [Progressive responsive image](#progressive-responsive-image)
|
|
8
|
+
- [Table of contents](#table-of-contents)
|
|
9
|
+
- [Out-of-the-box features](#out-of-the-box-features)
|
|
10
|
+
- [Intersection Observer](#intersection-observer)
|
|
11
|
+
- [Setup](#setup)
|
|
12
|
+
- [Usage](#usage)
|
|
13
|
+
- [Example](#example)
|
|
14
|
+
- [Props](#props)
|
|
15
|
+
- [Layout mode](#layout-mode)
|
|
16
|
+
- [The `ResponsiveImage` object](#the-responsiveimage-object)
|
|
14
17
|
|
|
15
18
|
### Out-of-the-box features
|
|
16
19
|
|
|
@@ -107,26 +110,26 @@ onMount(async () => {
|
|
|
107
110
|
|
|
108
111
|
### Props
|
|
109
112
|
|
|
110
|
-
| prop | type | default
|
|
111
|
-
| --------------------- | ------------------------------------------------ |
|
|
112
|
-
| data | `ResponsiveImage` object |
|
|
113
|
-
| class | string | null
|
|
114
|
-
| style |
|
|
115
|
-
| pictureClass | string | null
|
|
116
|
-
| pictureStyle |
|
|
117
|
-
| layout | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | "intrinsic"
|
|
118
|
-
| fadeInDuration | integer | 500
|
|
119
|
-
| intersectionThreshold | float | 0
|
|
120
|
-
| intersectionMargin | string | "0px 0px 0px 0px"
|
|
121
|
-
| lazyLoad | Boolean | true
|
|
122
|
-
| explicitWidth | Boolean | false
|
|
123
|
-
| objectFit | String | null
|
|
124
|
-
| objectPosition | String | null
|
|
125
|
-
| priority | Boolean | false
|
|
126
|
-
| srcSetCandidates | Array<number> | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] | :x: | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers
|
|
127
|
-
| sizes | string | undefined
|
|
128
|
-
| onLoad | () => void | undefined
|
|
129
|
-
| usePlaceholder | Boolean | true
|
|
113
|
+
| prop | type | default | required | description |
|
|
114
|
+
| --------------------- | ------------------------------------------------ | ---------------------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
115
|
+
| data | `ResponsiveImage` object | | :white_check_mark: | The actual response you get from a DatoCMS `responsiveImage` GraphQL query. |
|
|
116
|
+
| class | string | null | :x: | Additional CSS class of root node |
|
|
117
|
+
| style | string | null | :x: | Additional CSS rules to add to the root node |
|
|
118
|
+
| pictureClass | string | null | :x: | Additional CSS class for the inner `<picture />` tag |
|
|
119
|
+
| pictureStyle | string | null | :x: | Additional CSS rules to add to the inner `<picture />` tag |
|
|
120
|
+
| layout | 'intrinsic' \| 'fixed' \| 'responsive' \| 'fill' | "intrinsic" | :x: | The layout behavior of the image as the viewport changes size |
|
|
121
|
+
| fadeInDuration | integer | 500 | :x: | Duration (in ms) of the fade-in transition effect upoad image loading |
|
|
122
|
+
| 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. |
|
|
123
|
+
| intersectionMargin | string | "0px 0px 0px 0px" | :x: | 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. |
|
|
124
|
+
| lazyLoad | Boolean | true | :x: | Wheter enable lazy loading or not |
|
|
125
|
+
| explicitWidth | Boolean | false | :x: | Wheter the image wrapper should explicitely declare the width of the image or keep it fluid |
|
|
126
|
+
| objectFit | String | null | :x: | Defines how the image will fit into its parent container when using layout="fill" |
|
|
127
|
+
| objectPosition | String | null | :x: | Defines how the image is positioned within its parent element when using layout="fill". |
|
|
128
|
+
| 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" |
|
|
129
|
+
| srcSetCandidates | Array<number> | [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4] | :x: | If `data` does not contain `srcSet`, the candidates for the `srcset` attribute of the image will be auto-generated based on these width multipliers |
|
|
130
|
+
| 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) |
|
|
131
|
+
| onLoad | () => void | undefined | :x: | Function triggered when the image has finished loading |
|
|
132
|
+
| usePlaceholder | Boolean | true | :x: | Whether the component should use a blurred image placeholder |
|
|
130
133
|
|
|
131
134
|
#### Layout mode
|
|
132
135
|
|
|
@@ -152,16 +155,16 @@ The `data` prop expects an object with the same shape as the one returned by `re
|
|
|
152
155
|
|
|
153
156
|
Here's a complete recap of what `responsiveImage` offers:
|
|
154
157
|
|
|
155
|
-
| property | type | required | description
|
|
156
|
-
| ----------- | ------- | ------------------ |
|
|
157
|
-
| src | string | :white_check_mark: | The `src` attribute for the image
|
|
158
|
-
| width | integer | :white_check_mark: | The width of the image
|
|
159
|
-
| height | integer | :white_check_mark: | The height of the image
|
|
160
|
-
| alt | string | :x: | Alternate text (`alt`) for the image (not required, but strongly suggested!)
|
|
161
|
-
| title | string | :x: | Title attribute (`title`) for the image (not required, but strongly suggested!)
|
|
162
|
-
| sizes | string | :x: | The HTML5 `sizes` attribute for the image (omit it if you're already passing a `sizes` prop to the Image component)
|
|
163
|
-
| base64 | string | :x: | A base64-encoded thumbnail to offer during image loading
|
|
164
|
-
| bgColor | string | :x: | The background color for the image placeholder (omit it if you're already requesting `base64`)
|
|
165
|
-
| srcSet | string | :x: | The HTML5 `srcSet` attribute for the image (can be omitted, the Image component knows how to build it based on `src`)
|
|
158
|
+
| property | type | required | description |
|
|
159
|
+
| ----------- | ------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
160
|
+
| src | string | :white_check_mark: | The `src` attribute for the image |
|
|
161
|
+
| width | integer | :white_check_mark: | The width of the image |
|
|
162
|
+
| height | integer | :white_check_mark: | The height of the image |
|
|
163
|
+
| alt | string | :x: | Alternate text (`alt`) for the image (not required, but strongly suggested!) |
|
|
164
|
+
| title | string | :x: | Title attribute (`title`) for the image (not required, but strongly suggested!) |
|
|
165
|
+
| sizes | string | :x: | The HTML5 `sizes` attribute for the image (omit it if you're already passing a `sizes` prop to the Image component) |
|
|
166
|
+
| base64 | string | :x: | A base64-encoded thumbnail to offer during image loading |
|
|
167
|
+
| bgColor | string | :x: | The background color for the image placeholder (omit it if you're already requesting `base64`) |
|
|
168
|
+
| srcSet | string | :x: | The HTML5 `srcSet` attribute for the image (can be omitted, the Image component knows how to build it based on `src`) |
|
|
166
169
|
| webpSrcSet | string | :x: | The HTML5 `srcSet` attribute for the image in WebP format (deprecated, it's better to use the [`auto=format`](https://docs.imgix.com/apis/rendering/auto/auto#format) Imgix transform instead) |
|
|
167
|
-
| aspectRatio | float | :x: | The aspect ratio (width/height) of the image
|
|
170
|
+
| aspectRatio | float | :x: | The aspect ratio (width/height) of the image |
|
|
@@ -18,7 +18,7 @@ $:
|
|
|
18
18
|
{:else if mark === 'underline'}
|
|
19
19
|
<u><svelte:self node={{ type, value, marks: otherMarks }}><slot /></svelte:self></u>
|
|
20
20
|
{:else if mark === 'code'}
|
|
21
|
-
<
|
|
21
|
+
<code><svelte:self node={{ type, value, marks: otherMarks }}><slot /></svelte:self></code>
|
|
22
22
|
{/if}
|
|
23
23
|
{:else}
|
|
24
24
|
<Lines lines={node.value.split(/\n/)} />
|