Skip to content
This repository was archived by the owner on Jun 22, 2024. It is now read-only.

Commit d3288e4

Browse files
FlowkoFlowko
committed
chore: updated vue-email package
1 parent b9a0416 commit d3288e4

File tree

6 files changed

+179
-13
lines changed

6 files changed

+179
-13
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,13 @@
4646
},
4747
"dependencies": {
4848
"@nuxt/kit": "^3.11.2",
49+
"@vitejs/plugin-vue": "^5.0.5",
4950
"defu": "^6.1.4",
5051
"destr": "^2.0.3",
5152
"json5": "^2.2.3",
5253
"sirv": "^2.0.4",
5354
"vue-component-meta": "^2.0.19",
54-
"vue-email-edge": "0.8.11-28625178.e947738",
55-
"@vitejs/plugin-vue": "^5.0.5"
55+
"vue-email-edge": "0.8.11-28627007.a49db55"
5656
},
5757
"devDependencies": {
5858
"@antfu/eslint-config": "^2.20.0",

‎playground/components/Hello.vue

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
3+
import { EHeading } from 'vue-email-edge'
4+
5+
</script>
6+
7+
<template>
8+
<EHeading class="mx-0 my-[30px] p-0 text-center text-[24px] font-bold text-black"> Test Vue Email components </EHeading>
9+
</template>

‎playground/components/Tailwind.vue

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<script setup lang="ts">
2+
import { defineProps, withDefaults } from 'vue'
3+
import { EBody, EButton, EColumn, EContainer, EHead, EHeading, EHr, EHtml, EImg, ELink, EPreview, ERow, ESection, ETailwind, EText } from 'vue-email-edge'
4+
import { baseUrl } from '../utils/index'
5+
import Hello from './Hello.vue'
6+
7+
interface Props {
8+
invitedByUsername?: string
9+
teamName?: string
10+
username?: string
11+
invitedByEmail?: string
12+
inviteLink?: string
13+
inviteFromIp?: string
14+
inviteFromLocation?: string
15+
}
16+
17+
const props = withDefaults(defineProps<Props>(), {
18+
teamName: 'My project',
19+
username: 'John Doe',
20+
invitedByEmail: 'anpch@example.com',
21+
inviteLink: 'https://vercel.com/teams/invite/foo',
22+
inviteFromIp: '172.0.0.1',
23+
inviteFromLocation: 'San Francisco, CA',
24+
})
25+
26+
const previewText = `Join ${props.invitedByUsername} on Vercel`
27+
</script>
28+
29+
<template>
30+
<ETailwind>
31+
<EHtml>
32+
<EHead />
33+
<EPreview>{{ previewText }}</EPreview>
34+
<EBody class="bg-white my-auto mx-auto font-sans">
35+
<EContainer class="border border-solid border-[#eaeaea] p-[20px] md:p-7 rounded my-[40px] mx-auto max-w-[465px]">
36+
<ESection class="mt-[32px]">
37+
<EImg :src="baseUrl('/static/vercel-logo.png')" width="40" height="37" alt="Vercel" class="my-0 mx-auto" />
38+
</ESection>
39+
<Hello />
40+
<EHeading class="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
41+
Join <strong>{{ teamName }}</strong> on <strong>Vercel</strong>
42+
</EHeading>
43+
<EText class="text-black text-[14px] leading-[24px]">
44+
Hello {{ username }},
45+
</EText>
46+
<EText class="text-black text-[14px] leading-[24px]">
47+
<strong>bukinoshita</strong> (
48+
<ELink :href="`mailto:${invitedByEmail}`" class="text-blue-600 no-underline">
49+
{{ invitedByEmail }}
50+
</ELink>
51+
) has invited you to the <strong>{{ teamName }}</strong> team on <strong>Vercel</strong>.
52+
</EText>
53+
<ESection>
54+
<ERow>
55+
<EColumn align="right">
56+
<EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-user.png" width="64" height="64" />
57+
</EColumn>
58+
<EColumn align="center">
59+
<EImg src="https://vue-email-demo.vercel.app/static/vercel-arrow.png" width="12" height="9" alt="invited you to" />
60+
</EColumn>
61+
<EColumn align="left">
62+
<EImg class="rounded-full" src="https://vue-email-demo.vercel.app/static/vercel-team.png" width="64" height="64" />
63+
</EColumn>
64+
</ERow>
65+
</ESection>
66+
<ESection class="text-center mt-[32px] mb-[32px]">
67+
<EButton px="20" py="12" class="bg-[#000000] rounded text-white text-[12px] font-semibold no-underline text-center" :href="inviteLink">
68+
Join the team
69+
</EButton>
70+
</ESection>
71+
<EText class="text-black text-[14px] leading-[24px]">
72+
or copy and paste this URL into your browser:
73+
<ELink :href="inviteLink" class="text-blue-600 no-underline">
74+
{{ inviteLink }}
75+
</ELink>
76+
</EText>
77+
<EHr class="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
78+
<EText class="text-[#666666] text-[12px] leading-[24px]">
79+
This invitation was intended for
80+
<span class="text-black">{{ username }} </span>.This invite was sent from <span class="text-black">{{ inviteFromIp }}</span> located in
81+
<span class="text-black">{{ inviteFromLocation }}</span>. If you were not expecting this invitation, you can ignore this email. If you are concerned about your account's safety, please reply to this email to get in touch
82+
with us.
83+
</EText>
84+
</EContainer>
85+
</EBody>
86+
</EHtml>
87+
</ETailwind>
88+
</template>

‎playground/server/api/test.get.ts

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11
import { useRender } from 'vue-email-edge'
2-
import Email from '@/components/Email2.vue'
2+
import { defineAsyncComponent } from 'vue'
3+
import Email from '@/components/Tailwind.vue'
34

4-
5-
export default defineEventHandler(async () => {
5+
export default defineEventHandler(async (event) => {
66
try {
77
const template = await useRender(Email, {
88
// userFirstName: 'John',
99
// loginDevice: 'Chrome on Mac OS X',
1010
// loginLocation: 'Upland, California, United States',
1111
// loginIp: '47.149.53.167',
1212
// loginDate: new Date('September 7, 2022, 10:58 am'),
13-
userFirstname: 'test',
13+
invitedByEmail: 'anpch@example.com',
14+
inviteLink: 'https://vercel.com/teams/invite/foo',
15+
inviteFromIp: '172.0.0.1',
16+
inviteFromLocation: 'San Francisco, CA',
17+
invitedByUsername: 'bukinoshita',
18+
teamName: 'My project',
19+
username: 'John Doe',
1420
}).catch((error) => {
1521
console.error(error)
1622
})
@@ -23,4 +29,21 @@ export default defineEventHandler(async () => {
2329
catch (error) {
2430
console.error(error)
2531
}
32+
33+
// const body = await readBody(event)
34+
35+
// const { filename } = body
36+
37+
// if (!filename) {
38+
// throw createError({
39+
// statusCode: 400,
40+
// statusMessage: 'Filename is required',
41+
// })
42+
// }
43+
44+
// const component = await defineAsyncComponent(() => import(`../../components/${filename}.vue`))
45+
46+
// const template = await useRender(component)
47+
48+
// return { html: template.html }
2649
})

‎playground/utils/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,7 @@ export function getRandomInt(min: number, max: number): number {
77
export function getRandomArbitrary(min: number, max: number): number {
88
return Math.random() * (max - min) + min
99
}
10+
11+
export function baseUrl(path: string): string {
12+
return `https://vue-email-demo.vercel.app${path}`
13+
}

‎pnpm-lock.yaml

Lines changed: 49 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)