@websline/cms-view-utils 1.2.7 → 1.2.9
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.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@websline/cms-view-utils",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"eslint-config-prettier": "^10.1.8",
|
|
26
26
|
"eslint-plugin-svelte": "^3.19.0",
|
|
27
27
|
"globals": "^17.6.0",
|
|
28
|
-
"prettier": "^3.8.
|
|
28
|
+
"prettier": "^3.8.4",
|
|
29
29
|
"prettier-plugin-svelte": "^3.5.2",
|
|
30
30
|
"prettier-plugin-tailwindcss": "^0.8.0",
|
|
31
31
|
"tsup": "^8.5.1"
|
|
@@ -4,11 +4,18 @@
|
|
|
4
4
|
let {
|
|
5
5
|
class: className,
|
|
6
6
|
decoding = "async",
|
|
7
|
+
fetchpriority = "auto",
|
|
7
8
|
image,
|
|
9
|
+
img = $bindable(),
|
|
8
10
|
loading = "lazy",
|
|
11
|
+
pictureProps = {},
|
|
9
12
|
sources = {},
|
|
13
|
+
...rest
|
|
10
14
|
} = $props();
|
|
11
15
|
|
|
16
|
+
const buildSrcset = (source) =>
|
|
17
|
+
source.url2x ? `${source.url} 1x, ${source.url2x} 2x` : source.url;
|
|
18
|
+
|
|
12
19
|
const data = (() => {
|
|
13
20
|
if (!image || !image.formats) {
|
|
14
21
|
return {
|
|
@@ -57,7 +64,12 @@
|
|
|
57
64
|
const last = resolved[resolved.length - 1];
|
|
58
65
|
|
|
59
66
|
fallbackFormat = last.format;
|
|
60
|
-
|
|
67
|
+
|
|
68
|
+
// Use the last source (original format, e.g. jpg/png) for the <img>
|
|
69
|
+
// fallback instead of sources[0] (avif), for maximum compatibility.
|
|
70
|
+
const fmtSources = fallbackFormat.sources;
|
|
71
|
+
fallbackSrc =
|
|
72
|
+
fmtSources[fmtSources.length - 1]?.url ?? fmtSources[0]?.url ?? "";
|
|
61
73
|
}
|
|
62
74
|
|
|
63
75
|
const alt = image.alt ?? image.title ?? "";
|
|
@@ -67,23 +79,26 @@
|
|
|
67
79
|
</script>
|
|
68
80
|
|
|
69
81
|
{#if data.resolved.length}
|
|
70
|
-
<picture>
|
|
82
|
+
<picture {...pictureProps}>
|
|
71
83
|
{#each data.resolved as r (r.format.identifier + "-" + r.min)}
|
|
72
84
|
{#each r.format.sources as source (source.type + source.url)}
|
|
73
85
|
<source
|
|
74
|
-
srcset={source
|
|
86
|
+
srcset={buildSrcset(source)}
|
|
75
87
|
type={source.type}
|
|
76
88
|
media={r.min > 0 ? `(min-width: ${r.min}px)` : undefined} />
|
|
77
89
|
{/each}
|
|
78
90
|
{/each}
|
|
79
91
|
|
|
80
92
|
<img
|
|
81
|
-
|
|
93
|
+
bind:this={img}
|
|
94
|
+
{...rest}
|
|
82
95
|
alt={data.alt}
|
|
83
|
-
|
|
96
|
+
class={tw("h-full w-full object-cover", className)}
|
|
97
|
+
{decoding}
|
|
98
|
+
{fetchpriority}
|
|
84
99
|
height={data.fallbackFormat.height}
|
|
85
100
|
{loading}
|
|
86
|
-
{
|
|
87
|
-
|
|
101
|
+
src={data.fallbackSrc}
|
|
102
|
+
width={data.fallbackFormat.width} />
|
|
88
103
|
</picture>
|
|
89
104
|
{/if}
|