Skip to content

Commit 17b5479

Browse files
committed
fix: patch update, add support for with and height as number | string | undefined
1 parent 1263be6 commit 17b5479

File tree

3 files changed

+61
-25
lines changed

3 files changed

+61
-25
lines changed

svelte-cloudinary/src/lib/components/CldImage.svelte

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
/**
1212
* set the compomnent $$props to be of type CldImageProps
1313
*/
14-
type $$Props = CldImageProps;
14+
type $$Props = CldImageProps
1515
1616
const CLD_OPTIONS = ['config', 'deliveryType', 'preserveTransformations'];
1717
1818
// reactively destructure the props
19-
$: ({ alt, src, width, height, config } = $$props as $$Props);
19+
const { alt, src, width, height, config } = $$props as $$Props;
2020
2121
transformationPlugins.forEach(({ props = [] }) => {
2222
props.forEach((prop) => {
@@ -32,7 +32,7 @@
3232
src,
3333
width,
3434
height
35-
} as ImageOptions & $$Props;
35+
} as $$Props;
3636
3737
(Object.keys($$props) as Array<keyof $$Props>)
3838
.filter((key) => !CLD_OPTIONS.includes(key))
@@ -76,7 +76,7 @@
7676
...cldOptions,
7777
// Without, get a "never" type error on options.width
7878
width: imageProps.width
79-
}
79+
};
8080

8181
options.width = typeof options.width === 'string' ? parseInt(options.width) : options.width;
8282
options.height = typeof options.height === 'string' ? parseInt(options.height) : options.height;
@@ -85,10 +85,9 @@
8585
// so these should override the default options collected from the props alone if
8686
// the results are different.
8787

88-
if ( typeof width === 'number' && typeof options.width === 'number' && width !== options.width ) {
88+
if (typeof width === 'number' && typeof options.width === 'number' && width !== options.width) {
8989
options.widthResize = width;
9090
}
91-
92-
return getCldImageUrl(options, config);
91+
return getCldImageUrl(options, config)
9392
}}
9493
/>
Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,51 @@
11
// This types still comes wrong
22
// import type { ImageProps } from '@unpic/svelte'
33
// But this is the same used by the @unpic/svelte package
4-
import type { UnpicImageProps } from '@unpic/core';
4+
import type { ConstrainedImageProps, FixedImageProps, FullWidthImageProps, UnpicImageProps } from '@unpic/core';
55
import type { HTMLImgAttributes } from 'svelte/elements';
66
type ImageProps = UnpicImageProps<HTMLImgAttributes, string | null>;
77
import type { ImageOptions, ConfigOptions } from '@cloudinary-util/url-loader';
8-
export type CldImageProps = ImageOptions &
8+
type BaseProps = ImageOptions &
99
ImageProps & {
1010
config?: ConfigOptions;
1111
layout?: ImageProps['layout'];
1212
preserveTransformations?: boolean;
1313
tint?: string;
1414
};
15+
/**
16+
* Base props for CldImage component
17+
* It allows you to pass all the props that you can pass to the img tag
18+
* but also the props from @cloudinary/url-loader that you can find here https://svelte-cloudinary-git-beta-mediajams.vercel.app/components/CldImage/configuration
19+
* Since CldImage is based on unpic/svelte you can also pass all the props from @unpic/svelte found here https://unpic.pics/img/svelte/
20+
* width and height can be string | number | undefined
21+
* but with have a strong relation with the layout property
22+
* if layout="fullWidth" then width is not allowed, but height is required
23+
* if layout="fixed" then width and height are required
24+
* if layout="constrained" then width and height are required
25+
* "constrained" is the default value for the layout prop
26+
* @example
27+
*```html
28+
*<CldImage
29+
* height="300"
30+
* width={300}
31+
* src="images/woman-headphones"
32+
* alt="Description of my image"
33+
* />
34+
*````
35+
*
36+
* width laout="fullWidth"
37+
* ```html
38+
*
39+
* <CldImage
40+
* height="300"
41+
* src="images/woman-headphones"
42+
* alt="Description of my image"
43+
* layout="fullWidth"
44+
* />
45+
* ```
46+
**/
47+
export type CldImageProps = Omit<BaseProps, 'width' | 'height'> & (
48+
Omit<FullWidthImageProps<HTMLImgAttributes, string | null>, 'height'> & { height: string | number }
49+
| Omit<FixedImageProps<HTMLImgAttributes, string | null>, 'width' | 'height'> & { height: string | number; width: string | number }
50+
| Omit<ConstrainedImageProps<HTMLImgAttributes, string | null>, 'width' | 'height'> & { height: string | number; width: string | number }
51+
)

svelte-cloudinary/src/routes/+page.svelte

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@
33
</script>
44

55
<!-- <CldImage -->
6-
<!-- height={300} -->
6+
<!-- width="200" -->
7+
<!-- height={200} -->
78
<!-- src="images/woman-headphones" -->
8-
<!-- removeBackground -->
9-
<!-- tint="70:blue:green:purple" -->
10-
<!-- underlay="images/city-skyline" -->
11-
<!-- sizes="100vw" -->
12-
<!-- alt="Description of my image" -->
13-
<!-- layout="fullWidth" -->
9+
<!-- alt="Original image of images/woman with headphones" -->
10+
<!-- config={{ -->
11+
<!-- cloud: { -->
12+
<!-- cloudName: 'next-cloudinary' -->
13+
<!-- }, -->
14+
<!-- url: { secureDistribution: 'spacejelly.dev' } -->
15+
<!-- }} -->
1416
<!-- /> -->
1517
<CldImage
16-
width={200}
17-
height={200}
18+
height="300"
19+
width={300}
1820
src="images/woman-headphones"
19-
alt="Original image of images/woman with headphones"
20-
config={{
21-
cloud: {
22-
cloudName: 'next-cloudinary'
23-
},
24-
url: { secureDistribution: 'spacejelly.dev' }
25-
}}
21+
removeBackground
22+
tint="70:blue:green:purple"
23+
underlay="images/city-skyline"
24+
sizes="100vw"
25+
alt="Description of my image"
2626
/>
2727
<!-- <CldImage -->
2828
<!-- width={1200} -->

0 commit comments

Comments
 (0)