@better-svelte-email/components 2.0.0-beta.0 → 2.0.0-beta.1
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/README.md +57 -0
- package/dist/components/Body.svelte +22 -0
- package/dist/components/Body.svelte.d.ts +7 -0
- package/dist/components/Button.svelte +58 -0
- package/dist/components/Button.svelte.d.ts +11 -0
- package/dist/components/Column.svelte +14 -0
- package/dist/components/Column.svelte.d.ts +7 -0
- package/dist/components/Container.svelte +34 -0
- package/dist/components/Container.svelte.d.ts +7 -0
- package/dist/components/Head.svelte +13 -0
- package/dist/components/Head.svelte.d.ts +6 -0
- package/dist/components/Heading.svelte +35 -0
- package/dist/components/Heading.svelte.d.ts +15 -0
- package/dist/components/Hr.svelte +16 -0
- package/dist/components/Hr.svelte.d.ts +4 -0
- package/dist/components/Html.svelte +20 -0
- package/dist/components/Html.svelte.d.ts +10 -0
- package/dist/components/Img.svelte +27 -0
- package/dist/components/Img.svelte.d.ts +10 -0
- package/dist/components/Link.svelte +22 -0
- package/dist/components/Link.svelte.d.ts +9 -0
- package/dist/components/Preview.svelte +35 -0
- package/dist/components/Preview.svelte.d.ts +7 -0
- package/dist/components/Row.svelte +26 -0
- package/dist/components/Row.svelte.d.ts +7 -0
- package/dist/components/Section.svelte +28 -0
- package/dist/components/Section.svelte.d.ts +7 -0
- package/dist/components/Text.svelte +25 -0
- package/dist/components/Text.svelte.d.ts +8 -0
- package/dist/components/index.d.ts +14 -0
- package/dist/components/index.js +15 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/utils/index.d.ts +33 -0
- package/dist/utils/index.js +64 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# @better-svelte-email/components
|
|
2
|
+
|
|
3
|
+
Svelte **email primitives** for Better Svelte Email: layout and content building blocks (`Html`, `Body`, `Container`, `Section`, `Row`, `Column`, `Text`, `Heading`, `Button`, `Link`, `Img`, `Hr`, `Head`, `Preview`, etc.) designed to work with the server-side [`Renderer`](../server).
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i @better-svelte-email/components
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Peer dependencies:** `svelte` **>= 5.14.3**; `@sveltejs/kit` **>= 2** (optional metadata for Svelte tooling)
|
|
12
|
+
|
|
13
|
+
This package depends on [`@better-svelte-email/server`](../server) for shared rendering concerns.
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```svelte
|
|
18
|
+
<script>
|
|
19
|
+
import { Html, Head, Body, Container, Section, Text } from '@better-svelte-email/components';
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<Html>
|
|
23
|
+
<Head />
|
|
24
|
+
<Body>
|
|
25
|
+
<Container>
|
|
26
|
+
<Section>
|
|
27
|
+
<Text>Hello</Text>
|
|
28
|
+
</Section>
|
|
29
|
+
</Container>
|
|
30
|
+
</Body>
|
|
31
|
+
</Html>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Individual `.svelte` files can be imported via the `./ComponentName.svelte` export pattern (see `package.json` `exports`).
|
|
35
|
+
|
|
36
|
+
**`@better-svelte-email/components/utils`** — shared utilities subpath (see `exports`).
|
|
37
|
+
|
|
38
|
+
Most users install the umbrella package [`better-svelte-email`](../better-svelte-email) instead, which re-exports these components.
|
|
39
|
+
|
|
40
|
+
## Documentation
|
|
41
|
+
|
|
42
|
+
[better-svelte-email.konixy.dev](https://better-svelte-email.konixy.dev/docs)
|
|
43
|
+
|
|
44
|
+
## Monorepo
|
|
45
|
+
|
|
46
|
+
[github.com/Konixy/better-svelte-email](https://github.com/Konixy/better-svelte-email) — `packages/components`.
|
|
47
|
+
|
|
48
|
+
## Development
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
bun run build --filter=@better-svelte-email/components
|
|
52
|
+
bun run test --filter=@better-svelte-email/components
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## License
|
|
56
|
+
|
|
57
|
+
MIT
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
style,
|
|
7
|
+
class: className,
|
|
8
|
+
...restProps
|
|
9
|
+
}: { children?: any } & HTMLAttributes<HTMLBodyElement> = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<body {...restProps}>
|
|
13
|
+
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
|
|
14
|
+
<tbody>
|
|
15
|
+
<tr>
|
|
16
|
+
<td {style} class={className}>
|
|
17
|
+
{@render children?.()}
|
|
18
|
+
</td>
|
|
19
|
+
</tr>
|
|
20
|
+
</tbody>
|
|
21
|
+
</table>
|
|
22
|
+
</body>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
children?: any;
|
|
4
|
+
} & HTMLAttributes<HTMLBodyElement>;
|
|
5
|
+
declare const Body: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Body = ReturnType<typeof Body>;
|
|
7
|
+
export default Body;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
<!-- svelte-ignore state_referenced_locally -->
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
import { styleToString, pxToPt, combineStyles } from '../utils';
|
|
4
|
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
href = '#',
|
|
8
|
+
target = '_blank',
|
|
9
|
+
style = '',
|
|
10
|
+
pX = 0,
|
|
11
|
+
pY = 0,
|
|
12
|
+
children,
|
|
13
|
+
...restProps
|
|
14
|
+
}: {
|
|
15
|
+
href?: string;
|
|
16
|
+
target?: string;
|
|
17
|
+
pX?: number;
|
|
18
|
+
pY?: number;
|
|
19
|
+
children: any;
|
|
20
|
+
} & HTMLAnchorAttributes = $props();
|
|
21
|
+
|
|
22
|
+
const y = pY * 2;
|
|
23
|
+
const textRaise = pxToPt(y.toString());
|
|
24
|
+
|
|
25
|
+
// Button link styles
|
|
26
|
+
const buttonStyle = styleToString({
|
|
27
|
+
lineHeight: '100%',
|
|
28
|
+
textDecoration: 'none',
|
|
29
|
+
display: 'inline-block',
|
|
30
|
+
maxWidth: '100%',
|
|
31
|
+
padding: pY || pX ? `${pY}px ${pX}px` : undefined
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// Button text styles with MSO support
|
|
35
|
+
const buttonTextStyle = styleToString({
|
|
36
|
+
maxWidth: '100%',
|
|
37
|
+
display: 'inline-block',
|
|
38
|
+
lineHeight: '120%',
|
|
39
|
+
textDecoration: 'none',
|
|
40
|
+
textTransform: 'none',
|
|
41
|
+
msoPaddingAlt: '0px',
|
|
42
|
+
msoTextRaise: pY ? pxToPt(pY.toString()) : undefined
|
|
43
|
+
});
|
|
44
|
+
</script>
|
|
45
|
+
|
|
46
|
+
<a {...restProps} {href} {target} style={combineStyles(buttonStyle, style)}>
|
|
47
|
+
<span>
|
|
48
|
+
{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`}
|
|
49
|
+
</span>
|
|
50
|
+
|
|
51
|
+
<span style={buttonTextStyle}>
|
|
52
|
+
{@render children?.()}
|
|
53
|
+
</span>
|
|
54
|
+
|
|
55
|
+
<span style="display: none;">
|
|
56
|
+
{@html `<!--[if mso]><i style="letter-spacing: ${pX}px;mso-font-width:-100%" hidden> </i><![endif]-->`}
|
|
57
|
+
</span>
|
|
58
|
+
</a>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
href?: string;
|
|
4
|
+
target?: string;
|
|
5
|
+
pX?: number;
|
|
6
|
+
pY?: number;
|
|
7
|
+
children: any;
|
|
8
|
+
} & HTMLAnchorAttributes;
|
|
9
|
+
declare const Button: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
10
|
+
type Button = ReturnType<typeof Button>;
|
|
11
|
+
export default Button;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLTdAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
children?: any;
|
|
4
|
+
} & HTMLTdAttributes;
|
|
5
|
+
declare const Column: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Column = ReturnType<typeof Column>;
|
|
7
|
+
export default Column;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { combineStyles, styleToString } from '../utils';
|
|
3
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
style,
|
|
8
|
+
...restProps
|
|
9
|
+
}: {
|
|
10
|
+
children: any;
|
|
11
|
+
} & HTMLTableAttributes = $props();
|
|
12
|
+
|
|
13
|
+
// Default max-width for email containers (600px = 37.5em)
|
|
14
|
+
const defaultStyles = styleToString({ maxWidth: '37.5em' });
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<table
|
|
18
|
+
align="center"
|
|
19
|
+
width="100%"
|
|
20
|
+
role="presentation"
|
|
21
|
+
cellspacing="0"
|
|
22
|
+
cellpadding="0"
|
|
23
|
+
border="0"
|
|
24
|
+
style={combineStyles(defaultStyles, style)}
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
<tbody>
|
|
28
|
+
<tr style="width: 100%;">
|
|
29
|
+
<td>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</td>
|
|
32
|
+
</tr>
|
|
33
|
+
</tbody>
|
|
34
|
+
</table>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
children: any;
|
|
4
|
+
} & HTMLTableAttributes;
|
|
5
|
+
declare const Container: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Container = ReturnType<typeof Container>;
|
|
7
|
+
export default Container;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { children }: { children?: any } = $props();
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<head>
|
|
6
|
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<meta name="x-apple-disable-message-reformatting" />
|
|
9
|
+
<!--[if !mso]><!-->
|
|
10
|
+
<meta http-equiv="x-ua-compatible" content="IE=edge" />
|
|
11
|
+
<!--<![endif]-->
|
|
12
|
+
{@render children?.()}
|
|
13
|
+
</head>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!-- svelte-ignore state_referenced_locally -->
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
import { combineStyles, styleToString, withMargin } from '../utils';
|
|
4
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
5
|
+
|
|
6
|
+
type Props = HTMLAttributes<HTMLHeadingElement> & {
|
|
7
|
+
children: any;
|
|
8
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
9
|
+
m?: string;
|
|
10
|
+
mx?: string;
|
|
11
|
+
my?: string;
|
|
12
|
+
mt?: string;
|
|
13
|
+
mr?: string;
|
|
14
|
+
mb?: string;
|
|
15
|
+
ml?: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
let { style, as, children, ...restProps }: Props = $props();
|
|
19
|
+
|
|
20
|
+
const defaultStyles = styleToString({
|
|
21
|
+
...withMargin({
|
|
22
|
+
m: restProps.m,
|
|
23
|
+
mx: restProps.mx,
|
|
24
|
+
my: restProps.my,
|
|
25
|
+
mt: restProps.mt,
|
|
26
|
+
mr: restProps.mr,
|
|
27
|
+
mb: restProps.mb,
|
|
28
|
+
ml: restProps.ml
|
|
29
|
+
})
|
|
30
|
+
});
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
<svelte:element this={as} style={combineStyles(defaultStyles, style)} {...restProps}>
|
|
34
|
+
{@render children?.()}
|
|
35
|
+
</svelte:element>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type Props = HTMLAttributes<HTMLHeadingElement> & {
|
|
3
|
+
children: any;
|
|
4
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
5
|
+
m?: string;
|
|
6
|
+
mx?: string;
|
|
7
|
+
my?: string;
|
|
8
|
+
mt?: string;
|
|
9
|
+
mr?: string;
|
|
10
|
+
mb?: string;
|
|
11
|
+
ml?: string;
|
|
12
|
+
};
|
|
13
|
+
declare const Heading: import("svelte").Component<Props, {}, "">;
|
|
14
|
+
type Heading = ReturnType<typeof Heading>;
|
|
15
|
+
export default Heading;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { combineStyles, styleToString } from '../utils';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let { style, ...restProps }: HTMLAttributes<HTMLHRElement> = $props();
|
|
6
|
+
|
|
7
|
+
const defaultStyles = styleToString({
|
|
8
|
+
width: '100%',
|
|
9
|
+
border: 'none',
|
|
10
|
+
borderTopWidth: '1px',
|
|
11
|
+
borderTopStyle: 'solid',
|
|
12
|
+
borderColor: '#eaeaea'
|
|
13
|
+
});
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<hr style={combineStyles(defaultStyles, style)} {...restProps} />
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLHtmlAttributes } from 'svelte/elements';
|
|
3
|
+
|
|
4
|
+
type Props = HTMLHtmlAttributes & {
|
|
5
|
+
lang?: string;
|
|
6
|
+
dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
|
|
7
|
+
style?: string;
|
|
8
|
+
children?: any;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
let { lang = 'en', dir = 'ltr', children, ...restProps }: Props = $props();
|
|
12
|
+
|
|
13
|
+
const doctype =
|
|
14
|
+
'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
{@html doctype}
|
|
18
|
+
<html {...restProps} id="__better-svelte-email" {lang} {dir}>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLHtmlAttributes } from 'svelte/elements';
|
|
2
|
+
type Props = HTMLHtmlAttributes & {
|
|
3
|
+
lang?: string;
|
|
4
|
+
dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
|
|
5
|
+
style?: string;
|
|
6
|
+
children?: any;
|
|
7
|
+
};
|
|
8
|
+
declare const Html: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type Html = ReturnType<typeof Html>;
|
|
10
|
+
export default Html;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { combineStyles, styleToString } from '../utils';
|
|
3
|
+
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
style,
|
|
7
|
+
alt,
|
|
8
|
+
src,
|
|
9
|
+
width,
|
|
10
|
+
height,
|
|
11
|
+
...restProps
|
|
12
|
+
}: HTMLImgAttributes & {
|
|
13
|
+
alt: string;
|
|
14
|
+
src: string;
|
|
15
|
+
width: string;
|
|
16
|
+
height: string;
|
|
17
|
+
} = $props();
|
|
18
|
+
|
|
19
|
+
const defaultStyles = styleToString({
|
|
20
|
+
display: 'block',
|
|
21
|
+
outline: 'none',
|
|
22
|
+
border: 'none',
|
|
23
|
+
textDecoration: 'none'
|
|
24
|
+
});
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<img {alt} {src} {width} {height} style={combineStyles(defaultStyles, style)} {...restProps} />
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { HTMLImgAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = HTMLImgAttributes & {
|
|
3
|
+
alt: string;
|
|
4
|
+
src: string;
|
|
5
|
+
width: string;
|
|
6
|
+
height: string;
|
|
7
|
+
};
|
|
8
|
+
declare const Img: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type Img = ReturnType<typeof Img>;
|
|
10
|
+
export default Img;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { combineStyles, styleToString } from '../utils';
|
|
3
|
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
href,
|
|
8
|
+
target = '_blank',
|
|
9
|
+
style,
|
|
10
|
+
...restProps
|
|
11
|
+
}: {
|
|
12
|
+
href: string;
|
|
13
|
+
target?: string;
|
|
14
|
+
children: any;
|
|
15
|
+
} & HTMLAnchorAttributes = $props();
|
|
16
|
+
|
|
17
|
+
const defaultStyles = styleToString({ textDecorationLine: 'none', color: '#067df7' });
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<a {href} {target} {...restProps} style={combineStyles(defaultStyles, style)}>
|
|
21
|
+
{@render children?.()}
|
|
22
|
+
</a>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { HTMLAnchorAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
href: string;
|
|
4
|
+
target?: string;
|
|
5
|
+
children: any;
|
|
6
|
+
} & HTMLAnchorAttributes;
|
|
7
|
+
declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
8
|
+
type Link = ReturnType<typeof Link>;
|
|
9
|
+
export default Link;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { styleToString } from '../utils';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
const PREVIEW_MAX_LENGTH = 150;
|
|
6
|
+
|
|
7
|
+
let { preview, ...restProps }: { preview: string } & HTMLAttributes<HTMLDivElement> = $props();
|
|
8
|
+
|
|
9
|
+
let text = $derived(preview.substring(0, PREVIEW_MAX_LENGTH));
|
|
10
|
+
|
|
11
|
+
const renderWhiteSpace = (text: string) => {
|
|
12
|
+
if (text.length >= PREVIEW_MAX_LENGTH) return '';
|
|
13
|
+
const whiteSpaceCodes = '\xa0\u200C\u200B\u200D\u200E\u200F\uFEFF';
|
|
14
|
+
return whiteSpaceCodes.repeat(PREVIEW_MAX_LENGTH - text.length);
|
|
15
|
+
};
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div
|
|
19
|
+
id="__better-svelte-email-preview"
|
|
20
|
+
style={styleToString({
|
|
21
|
+
display: 'none',
|
|
22
|
+
overflow: 'hidden',
|
|
23
|
+
lineHeight: '1px',
|
|
24
|
+
opacity: 0,
|
|
25
|
+
maxHeight: 0,
|
|
26
|
+
maxWidth: 0
|
|
27
|
+
})}
|
|
28
|
+
data-skip-in-text={true}
|
|
29
|
+
{...restProps}
|
|
30
|
+
>
|
|
31
|
+
{text}
|
|
32
|
+
<div>
|
|
33
|
+
{renderWhiteSpace(text)}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
preview: string;
|
|
4
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
5
|
+
declare const Preview: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Preview = ReturnType<typeof Preview>;
|
|
7
|
+
export default Preview;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
...restProps
|
|
7
|
+
}: {
|
|
8
|
+
children: any;
|
|
9
|
+
} & HTMLTableAttributes = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<table
|
|
13
|
+
align="center"
|
|
14
|
+
width="100%"
|
|
15
|
+
border={0}
|
|
16
|
+
cellPadding={0}
|
|
17
|
+
cellSpacing={0}
|
|
18
|
+
role="presentation"
|
|
19
|
+
{...restProps}
|
|
20
|
+
>
|
|
21
|
+
<tbody style="width: 100%;">
|
|
22
|
+
<tr style="width: 100%;">
|
|
23
|
+
{@render children?.()}
|
|
24
|
+
</tr>
|
|
25
|
+
</tbody>
|
|
26
|
+
</table>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
children,
|
|
6
|
+
...restProps
|
|
7
|
+
}: {
|
|
8
|
+
children: any;
|
|
9
|
+
} & HTMLTableAttributes = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<table
|
|
13
|
+
align="center"
|
|
14
|
+
width="100%"
|
|
15
|
+
border="0"
|
|
16
|
+
cellspacing="0"
|
|
17
|
+
cellpadding="0"
|
|
18
|
+
role="presentation"
|
|
19
|
+
{...restProps}
|
|
20
|
+
>
|
|
21
|
+
<tbody>
|
|
22
|
+
<tr>
|
|
23
|
+
<td>
|
|
24
|
+
{@render children?.()}
|
|
25
|
+
</td>
|
|
26
|
+
</tr>
|
|
27
|
+
</tbody>
|
|
28
|
+
</table>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { HTMLTableAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
children: any;
|
|
4
|
+
} & HTMLTableAttributes;
|
|
5
|
+
declare const Section: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
6
|
+
type Section = ReturnType<typeof Section>;
|
|
7
|
+
export default Section;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { combineStyles, styleToString } from '../utils';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
as = 'p',
|
|
7
|
+
style,
|
|
8
|
+
children,
|
|
9
|
+
...restProps
|
|
10
|
+
}: {
|
|
11
|
+
as?: string;
|
|
12
|
+
children: any;
|
|
13
|
+
} & HTMLAttributes<HTMLParagraphElement> = $props();
|
|
14
|
+
|
|
15
|
+
// Default email-safe text styles
|
|
16
|
+
const defaultStyles = styleToString({
|
|
17
|
+
fontSize: '14px',
|
|
18
|
+
lineHeight: '24px',
|
|
19
|
+
margin: '16px 0'
|
|
20
|
+
});
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<svelte:element this={as} style={combineStyles(defaultStyles, style)} {...restProps}>
|
|
24
|
+
{@render children?.()}
|
|
25
|
+
</svelte:element>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
as?: string;
|
|
4
|
+
children: any;
|
|
5
|
+
} & HTMLAttributes<HTMLParagraphElement>;
|
|
6
|
+
declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type Text = ReturnType<typeof Text>;
|
|
8
|
+
export default Text;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export { default as Body } from './Body.svelte';
|
|
2
|
+
export { default as Button } from './Button.svelte';
|
|
3
|
+
export { default as Column } from './Column.svelte';
|
|
4
|
+
export { default as Container } from './Container.svelte';
|
|
5
|
+
export { default as Head } from './Head.svelte';
|
|
6
|
+
export { default as Heading } from './Heading.svelte';
|
|
7
|
+
export { default as Hr } from './Hr.svelte';
|
|
8
|
+
export { default as Html } from './Html.svelte';
|
|
9
|
+
export { default as Img } from './Img.svelte';
|
|
10
|
+
export { default as Link } from './Link.svelte';
|
|
11
|
+
export { default as Preview } from './Preview.svelte';
|
|
12
|
+
export { default as Row } from './Row.svelte';
|
|
13
|
+
export { default as Section } from './Section.svelte';
|
|
14
|
+
export { default as Text } from './Text.svelte';
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// Email components for better-svelte-email
|
|
2
|
+
export { default as Body } from './Body.svelte';
|
|
3
|
+
export { default as Button } from './Button.svelte';
|
|
4
|
+
export { default as Column } from './Column.svelte';
|
|
5
|
+
export { default as Container } from './Container.svelte';
|
|
6
|
+
export { default as Head } from './Head.svelte';
|
|
7
|
+
export { default as Heading } from './Heading.svelte';
|
|
8
|
+
export { default as Hr } from './Hr.svelte';
|
|
9
|
+
export { default as Html } from './Html.svelte';
|
|
10
|
+
export { default as Img } from './Img.svelte';
|
|
11
|
+
export { default as Link } from './Link.svelte';
|
|
12
|
+
export { default as Preview } from './Preview.svelte';
|
|
13
|
+
export { default as Row } from './Row.svelte';
|
|
14
|
+
export { default as Section } from './Section.svelte';
|
|
15
|
+
export { default as Text } from './Text.svelte';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components';
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a style object to a CSS string
|
|
3
|
+
* @param style - Object containing CSS properties
|
|
4
|
+
* @returns CSS string with properties
|
|
5
|
+
*/
|
|
6
|
+
export declare function styleToString(style: Record<string, string | number | undefined>): string;
|
|
7
|
+
/**
|
|
8
|
+
* Convert pixels to points for email clients
|
|
9
|
+
* @param px - Pixel value as string
|
|
10
|
+
* @returns Point value as string
|
|
11
|
+
*/
|
|
12
|
+
export declare function pxToPt(px: string | number): string;
|
|
13
|
+
export type Margin = {
|
|
14
|
+
m?: string;
|
|
15
|
+
mx?: string;
|
|
16
|
+
my?: string;
|
|
17
|
+
mt?: string;
|
|
18
|
+
mr?: string;
|
|
19
|
+
mb?: string;
|
|
20
|
+
ml?: string;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Convert margin props to a CSS style object
|
|
24
|
+
* @param props - Margin properties object with shorthand notation (m, mx, my, mt, mr, mb, ml)
|
|
25
|
+
* @returns Style object with margin properties in pixels
|
|
26
|
+
*/
|
|
27
|
+
export declare function withMargin(props: Margin): any;
|
|
28
|
+
/**
|
|
29
|
+
* Combine multiple styles into a single string
|
|
30
|
+
* @param styles - Array of style strings
|
|
31
|
+
* @returns Combined style string
|
|
32
|
+
*/
|
|
33
|
+
export declare function combineStyles(...styles: (string | undefined | null)[]): string;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Convert a style object to a CSS string
|
|
3
|
+
* @param style - Object containing CSS properties
|
|
4
|
+
* @returns CSS string with properties
|
|
5
|
+
*/
|
|
6
|
+
export function styleToString(style) {
|
|
7
|
+
return Object.entries(style)
|
|
8
|
+
.filter(([, value]) => value !== undefined && value !== null && value !== '')
|
|
9
|
+
.map(([key, value]) => {
|
|
10
|
+
// Convert camelCase to kebab-case
|
|
11
|
+
const cssKey = key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
|
|
12
|
+
return `${cssKey}:${value}`;
|
|
13
|
+
})
|
|
14
|
+
.join(';');
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Convert pixels to points for email clients
|
|
18
|
+
* @param px - Pixel value as string
|
|
19
|
+
* @returns Point value as string
|
|
20
|
+
*/
|
|
21
|
+
export function pxToPt(px) {
|
|
22
|
+
const value = typeof px === 'string' ? parseFloat(px) : px;
|
|
23
|
+
return `${Math.round(value * 0.75)}pt`;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Convert margin props to a CSS style object
|
|
27
|
+
* @param props - Margin properties object with shorthand notation (m, mx, my, mt, mr, mb, ml)
|
|
28
|
+
* @returns Style object with margin properties in pixels
|
|
29
|
+
*/
|
|
30
|
+
export function withMargin(props) {
|
|
31
|
+
const margins = [
|
|
32
|
+
withSpace(props.m, ['margin']),
|
|
33
|
+
withSpace(props.mx, ['marginLeft', 'marginRight']),
|
|
34
|
+
withSpace(props.my, ['marginTop', 'marginBottom']),
|
|
35
|
+
withSpace(props.mt, ['marginTop']),
|
|
36
|
+
withSpace(props.mr, ['marginRight']),
|
|
37
|
+
withSpace(props.mb, ['marginBottom']),
|
|
38
|
+
withSpace(props.ml, ['marginLeft'])
|
|
39
|
+
];
|
|
40
|
+
return Object.assign({}, ...margins);
|
|
41
|
+
}
|
|
42
|
+
function withSpace(value, properties) {
|
|
43
|
+
return properties.reduce((styles, property) => {
|
|
44
|
+
if (value) {
|
|
45
|
+
return { ...styles, [property]: `${value}px` };
|
|
46
|
+
}
|
|
47
|
+
return styles;
|
|
48
|
+
}, {});
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Combine multiple styles into a single string
|
|
52
|
+
* @param styles - Array of style strings
|
|
53
|
+
* @returns Combined style string
|
|
54
|
+
*/
|
|
55
|
+
export function combineStyles(...styles) {
|
|
56
|
+
return styles
|
|
57
|
+
.filter(Boolean)
|
|
58
|
+
.map((s) => s
|
|
59
|
+
?.split(';')
|
|
60
|
+
.map((s) => s.trim())
|
|
61
|
+
.filter(Boolean))
|
|
62
|
+
.flat()
|
|
63
|
+
.join(';');
|
|
64
|
+
}
|