@phosart/common 0.4.25 → 0.4.28
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/dist/Image.svelte +12 -6
- package/dist/Image.svelte.d.ts +1 -0
- package/dist/Image.svelte.d.ts.map +1 -1
- package/dist/util/phosart_config.svelte.d.ts +1 -0
- package/dist/util/phosart_config.svelte.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/lib/Image.svelte +12 -6
- package/src/lib/util/phosart_config.svelte.ts +1 -0
package/dist/Image.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { onlyHighRes, type Image as ImageModel, no4K } from './util/art.js';
|
|
3
3
|
import { untrack } from 'svelte';
|
|
4
4
|
import { isHighRes } from './HighResContext.svelte';
|
|
5
|
+
import { useLibraryConfig } from './util/phosart_config.svelte.js';
|
|
5
6
|
|
|
6
7
|
interface Props {
|
|
7
8
|
picture: ImageModel;
|
|
@@ -11,6 +12,7 @@
|
|
|
11
12
|
nolqip?: boolean;
|
|
12
13
|
onloaded?: () => void;
|
|
13
14
|
loading?: boolean;
|
|
15
|
+
transformSrc?: (src: string) => string;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
let {
|
|
@@ -20,9 +22,15 @@
|
|
|
20
22
|
video = undefined,
|
|
21
23
|
controls = false,
|
|
22
24
|
nolqip = false,
|
|
23
|
-
loading = $bindable(true)
|
|
25
|
+
loading = $bindable(true),
|
|
26
|
+
transformSrc: userTransformSrc
|
|
24
27
|
}: Props = $props();
|
|
25
28
|
|
|
29
|
+
const config = useLibraryConfig();
|
|
30
|
+
const transformSrc = $derived(
|
|
31
|
+
userTransformSrc ?? config.defaultTransformSrc ?? ((s: string) => s)
|
|
32
|
+
);
|
|
33
|
+
|
|
26
34
|
let showBackground = $state(true);
|
|
27
35
|
let loadingMeta = $state(true);
|
|
28
36
|
// svelte-ignore state_referenced_locally
|
|
@@ -32,9 +40,7 @@
|
|
|
32
40
|
let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
|
|
33
41
|
|
|
34
42
|
let background = $derived(
|
|
35
|
-
!nolqip && src.lqip && showBackground
|
|
36
|
-
? `url(${src.lqip?.src}) no-repeat center/contain`
|
|
37
|
-
: 'none'
|
|
43
|
+
!nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
|
|
38
44
|
);
|
|
39
45
|
|
|
40
46
|
$effect(() => {
|
|
@@ -115,12 +121,12 @@
|
|
|
115
121
|
<picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
|
|
116
122
|
{#each Object.entries(src.sources) as [format, images] (format)}
|
|
117
123
|
<source
|
|
118
|
-
srcset={images.map((img) => `${img.src} ${img.w}w`).join(', ')}
|
|
124
|
+
srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
|
|
119
125
|
type={'image/' + format}
|
|
120
126
|
/>
|
|
121
127
|
{/each}
|
|
122
128
|
<img
|
|
123
|
-
src={src.fallback.src}
|
|
129
|
+
src={transformSrc(src.fallback.src)}
|
|
124
130
|
{alt}
|
|
125
131
|
use:onload
|
|
126
132
|
loading="lazy"
|
package/dist/Image.svelte.d.ts
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;
|
|
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;AAM3E,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;AAmHF,QAAA,MAAM,KAAK,kDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
|
|
@@ -36,6 +36,7 @@ export interface LibraryConfig {
|
|
|
36
36
|
modal?: {
|
|
37
37
|
chipOptionsByType?: ChipOptionsByType | null;
|
|
38
38
|
};
|
|
39
|
+
defaultTransformSrc?: (src: string) => string;
|
|
39
40
|
}
|
|
40
41
|
export declare function useChipConfig<Type extends keyof ChipOptionsByType>(type: Type): ChipOptions<DataType<Type>> | null;
|
|
41
42
|
export declare function setLibraryConfig(config: LibraryConfig): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"phosart_config.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/util/phosart_config.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,WAAW,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIhF,MAAM,MAAM,UAAU,CAAC,CAAC,IACrB;IACA,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACA,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEL,KAAK,cAAc,CAAC,CAAC,IAClB;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,MAAM,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAErC,KAAK,eAAe,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,mBAAmB,CAAC;IAC/B,SAAS,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/C,MAAM,MAAM,QAAQ,CAAC,IAAI,SAAS,MAAM,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;AAEjF,MAAM,MAAM,iBAAiB,GAAG;KAC9B,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QACT,oBAAoB,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAC,GAAG,IAAI,CAAC;QAC/F,qBAAqB,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC;KAC7F,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"phosart_config.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/util/phosart_config.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,WAAW,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIhF,MAAM,MAAM,UAAU,CAAC,CAAC,IACrB;IACA,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC;CAChB,GACD;IACA,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEL,KAAK,cAAc,CAAC,CAAC,IAClB;IAAE,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,GACjD;IAAE,MAAM,CAAC,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAErC,KAAK,eAAe,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,EAAE,mBAAmB,CAAC;IAC/B,SAAS,EAAE,QAAQ,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/C,MAAM,MAAM,QAAQ,CAAC,IAAI,SAAS,MAAM,eAAe,IAAI,eAAe,CAAC,IAAI,CAAC,CAAC;AAEjF,MAAM,MAAM,iBAAiB,GAAG;KAC9B,CAAC,IAAI,MAAM,eAAe,CAAC,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,MAAM,WAAW,aAAa;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QACT,oBAAoB,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,eAAe,CAAC,CAAC,GAAG,IAAI,CAAC;QAC/F,qBAAqB,CAAC,EAAE,WAAW,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC;KAC7F,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,iBAAiB,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAA;KAAE,CAAC;IACzD,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC9C;AAuCD,wBAAgB,aAAa,CAAC,IAAI,SAAS,MAAM,iBAAiB,EACjE,IAAI,EAAE,IAAI,GACR,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAMpC;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,aAAa,QAKrD;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAEhD"}
|
package/package.json
CHANGED
package/src/lib/Image.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { onlyHighRes, type Image as ImageModel, no4K } from './util/art.ts';
|
|
3
3
|
import { untrack } from 'svelte';
|
|
4
4
|
import { isHighRes } from './HighResContext.svelte';
|
|
5
|
+
import { useLibraryConfig } from './util/phosart_config.svelte.ts';
|
|
5
6
|
|
|
6
7
|
interface Props {
|
|
7
8
|
picture: ImageModel;
|
|
@@ -11,6 +12,7 @@
|
|
|
11
12
|
nolqip?: boolean;
|
|
12
13
|
onloaded?: () => void;
|
|
13
14
|
loading?: boolean;
|
|
15
|
+
transformSrc?: (src: string) => string;
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
let {
|
|
@@ -20,9 +22,15 @@
|
|
|
20
22
|
video = undefined,
|
|
21
23
|
controls = false,
|
|
22
24
|
nolqip = false,
|
|
23
|
-
loading = $bindable(true)
|
|
25
|
+
loading = $bindable(true),
|
|
26
|
+
transformSrc: userTransformSrc
|
|
24
27
|
}: Props = $props();
|
|
25
28
|
|
|
29
|
+
const config = useLibraryConfig();
|
|
30
|
+
const transformSrc = $derived(
|
|
31
|
+
userTransformSrc ?? config.defaultTransformSrc ?? ((s: string) => s)
|
|
32
|
+
);
|
|
33
|
+
|
|
26
34
|
let showBackground = $state(true);
|
|
27
35
|
let loadingMeta = $state(true);
|
|
28
36
|
// svelte-ignore state_referenced_locally
|
|
@@ -32,9 +40,7 @@
|
|
|
32
40
|
let src = $derived(highRes ? onlyHighRes(picture) : no4K(picture));
|
|
33
41
|
|
|
34
42
|
let background = $derived(
|
|
35
|
-
!nolqip && src.lqip && showBackground
|
|
36
|
-
? `url(${src.lqip?.src}) no-repeat center/contain`
|
|
37
|
-
: 'none'
|
|
43
|
+
!nolqip && src.lqip && showBackground ? `url(${src.lqip.src}) no-repeat center/contain` : 'none'
|
|
38
44
|
);
|
|
39
45
|
|
|
40
46
|
$effect(() => {
|
|
@@ -115,12 +121,12 @@
|
|
|
115
121
|
<picture style="background: {background}; aspect-ratio: {src.fallback.w} / {src.fallback.h};">
|
|
116
122
|
{#each Object.entries(src.sources) as [format, images] (format)}
|
|
117
123
|
<source
|
|
118
|
-
srcset={images.map((img) => `${img.src} ${img.w}w`).join(', ')}
|
|
124
|
+
srcset={images.map((img) => `${transformSrc(img.src)} ${img.w}w`).join(', ')}
|
|
119
125
|
type={'image/' + format}
|
|
120
126
|
/>
|
|
121
127
|
{/each}
|
|
122
128
|
<img
|
|
123
|
-
src={src.fallback.src}
|
|
129
|
+
src={transformSrc(src.fallback.src)}
|
|
124
130
|
{alt}
|
|
125
131
|
use:onload
|
|
126
132
|
loading="lazy"
|
|
@@ -40,6 +40,7 @@ export interface LibraryConfig {
|
|
|
40
40
|
DefaultPieceComponent?: NonNullable<ComponentProps<typeof Gallery>['PieceComponent']> | null;
|
|
41
41
|
};
|
|
42
42
|
modal?: { chipOptionsByType?: ChipOptionsByType | null };
|
|
43
|
+
defaultTransformSrc?: (src: string) => string;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
const DEFAULT_CONFIG: LibraryConfig = {
|