|
1 | 1 | // This types still comes wrong
|
2 | 2 | // import type { ImageProps } from '@unpic/svelte'
|
3 | 3 | // 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'; |
5 | 5 | import type { HTMLImgAttributes } from 'svelte/elements';
|
6 | 6 | type ImageProps = UnpicImageProps<HTMLImgAttributes, string | null>;
|
7 | 7 | import type { ImageOptions, ConfigOptions } from '@cloudinary-util/url-loader';
|
8 |
| -export type CldImageProps = ImageOptions & |
| 8 | +type BaseProps = ImageOptions & |
9 | 9 | ImageProps & {
|
10 | 10 | config?: ConfigOptions;
|
11 | 11 | layout?: ImageProps['layout'];
|
12 | 12 | preserveTransformations?: boolean;
|
13 | 13 | tint?: string;
|
14 | 14 | };
|
| 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 | +) |
0 commit comments