@phosart/common 0.4.25 → 0.4.27

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.
Files changed (5) hide show
  1. package/dist/Image.svelte +6 -6
  2. package/dist/Image.svelte.d.ts +1 -0
  3. package/dist/Image.svelte.d.ts.map +1 -1
  4. package/package.json +1 -1
  5. package/src/lib/Image.svelte +6 -6
package/dist/Image.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  nolqip?: boolean;
12
12
  onloaded?: () => void;
13
13
  loading?: boolean;
14
+ transformSrc?: (src: string) => string;
14
15
  }
15
16
 
16
17
  let {
@@ -20,7 +21,8 @@
20
21
  video = undefined,
21
22
  controls = false,
22
23
  nolqip = false,
23
- loading = $bindable(true)
24
+ loading = $bindable(true),
25
+ transformSrc = (s) => s
24
26
  }: Props = $props();
25
27
 
26
28
  let showBackground = $state(true);
@@ -32,9 +34,7 @@
32
34
  let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
33
35
 
34
36
  let background = $derived(
35
- !nolqip && src.lqip && showBackground
36
- ? `url(${src.lqip?.src}) no-repeat center/contain`
37
- : 'none'
37
+ !nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
38
38
  );
39
39
 
40
40
  $effect(() => {
@@ -115,12 +115,12 @@
115
115
  <picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
116
116
  {#each Object.entries(src.sources) as [format, images] (format)}
117
117
  <source
118
- srcset={images.map((img) => `${img.src} ${img.w}w`).join(', ')}
118
+ srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
119
119
  type={'image/' + format}
120
120
  />
121
121
  {/each}
122
122
  <img
123
- src={src.fallback.src}
123
+ src={transformSrc(src.fallback.src)}
124
124
  {alt}
125
125
  use:onload
126
126
  loading="lazy"
package/dist/Image.svelte.d.ts CHANGED
@@ -7,6 +7,7 @@ interface Props {
7
7
  nolqip?: boolean;
8
8
  onloaded?: () => void;
9
9
  loading?: boolean;
10
+ transformSrc?: (src: string) => string;
10
11
  }
11
12
  declare const Image: import("svelte").Component<Props, {}, "loading">;
12
13
  type Image = ReturnType<typeof Image>;
package/dist/Image.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAK3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AA8GF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Image.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Image.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,KAAK,IAAI,UAAU,EAAQ,MAAM,eAAe,CAAC;AAK3E,UAAU,KAAK;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACvC;AA6GF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@phosart/common",
3
- "version": "0.4.25",
3
+ "version": "0.4.27",
4
4
  "files": [
5
5
  "dist",
6
6
  "!dist/**/*.test.*",
package/src/lib/Image.svelte CHANGED
@@ -11,6 +11,7 @@
11
11
  nolqip?: boolean;
12
12
  onloaded?: () => void;
13
13
  loading?: boolean;
14
+ transformSrc?: (src: string) => string;
14
15
  }
15
16
 
16
17
  let {
@@ -20,7 +21,8 @@
20
21
  video = undefined,
21
22
  controls = false,
22
23
  nolqip = false,
23
- loading = $bindable(true)
24
+ loading = $bindable(true),
25
+ transformSrc = (s) => s
24
26
  }: Props = $props();
25
27
 
26
28
  let showBackground = $state(true);
@@ -32,9 +34,7 @@
32
34
  let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
33
35
 
34
36
  let background = $derived(
35
- !nolqip && src.lqip && showBackground
36
- ? `url(${src.lqip?.src}) no-repeat center/contain`
37
- : 'none'
37
+ !nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
38
38
  );
39
39
 
40
40
  $effect(() => {
@@ -115,12 +115,12 @@
115
115
  <picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
116
116
  {#each Object.entries(src.sources) as [format, images] (format)}
117
117
  <source
118
- srcset={images.map((img) => `${img.src} ${img.w}w`).join(', ')}
118
+ srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
119
119
  type={'image/' + format}
120
120
  />
121
121
  {/each}
122
122
  <img
123
- src={src.fallback.src}
123
+ src={transformSrc(src.fallback.src)}
124
124
  {alt}
125
125
  use:onload
126
126
  loading="lazy"