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

Commit aeb9720

Browse files
FlowkoFlowko
committed
feat: get props from components
1 parent 5242436 commit aeb9720

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1517
-368
lines changed

‎.eslintignore

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.eslintrc

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎.vscode/settings.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
// Enable the ESlint flat config support
3+
"eslint.experimental.useFlatConfig": true,
4+
5+
// Disable the default formatter, use eslint instead
6+
"prettier.enable": false,
7+
"editor.formatOnSave": false,
8+
9+
// Auto fix
10+
"editor.codeActionsOnSave": {
11+
"source.fixAll.eslint": "explicit",
12+
"source.organizeImports": "never"
13+
},
14+
15+
// Silent the stylistic rules in you IDE, but still auto fix them
16+
"eslint.rules.customizations": [
17+
{ "rule": "style/*", "severity": "off" },
18+
{ "rule": "format/*", "severity": "off" },
19+
{ "rule": "*-indent", "severity": "off" },
20+
{ "rule": "*-spacing", "severity": "off" },
21+
{ "rule": "*-spaces", "severity": "off" },
22+
{ "rule": "*-order", "severity": "off" },
23+
{ "rule": "*-dangle", "severity": "off" },
24+
{ "rule": "*-newline", "severity": "off" },
25+
{ "rule": "*quotes", "severity": "off" },
26+
{ "rule": "*semi", "severity": "off" }
27+
],
28+
29+
// Enable eslint for all supported languages
30+
"eslint.validate": [
31+
"javascript",
32+
"javascriptreact",
33+
"typescript",
34+
"typescriptreact",
35+
"vue",
36+
"html",
37+
"markdown",
38+
"json",
39+
"jsonc",
40+
"yaml",
41+
"toml"
42+
]
43+
}

‎README.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
[![vue-email](https://github.com/vue-email/vue-email/blob/main/public/repo-banner.png?raw=true)](https://vuemail.net)
22

3-
43
<div align="center">
54

65
[![npm version][npm-version-src]][npm-version-href]
@@ -90,7 +89,6 @@ npm run release
9089

9190
[MIT](./LICENSE) License © 2023-PRESENT [Vue Email](https://vuemail.net/)
9291

93-
9492
<!-- Badges -->
9593
[npm-version-src]: https://img.shields.io/npm/v/@vue-email/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
9694
[npm-version-href]: https://npmjs.com/package/@vue-email/nuxt

‎client/components/CodeContainer.vue

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,24 @@ const items = computed(() => {
5959
code: template.value.txt,
6060
},
6161
]
62-
} else if (editorCode.value.id === 'html') {
62+
}
63+
else if (editorCode.value.id === 'html') {
6364
arr.push({
6465
key: 'html',
6566
label: 'HTML',
6667
icon: 'i-ph-file-html-duotone',
6768
code: template.value.html,
6869
})
69-
} else if (editorCode.value.id === 'txt') {
70+
}
71+
else if (editorCode.value.id === 'txt') {
7072
arr.push({
7173
key: 'txt',
7274
label: 'Plain Text',
7375
icon: 'i-ph-text-t-duotone',
7476
code: template.value.txt,
7577
})
76-
} else if (editorCode.value.id === 'vue') {
78+
}
79+
else if (editorCode.value.id === 'vue') {
7780
arr.push({
7881
key: 'vue',
7982
label: 'Vue',
@@ -89,9 +92,12 @@ const tab = ref(0)
8992
</script>
9093

9194
<template>
92-
<UTabs v-model="tab" :items="items" :ui="{
93-
wrapper: 'relative space-y-0'
94-
}">
95+
{{ email.props }}
96+
<UTabs
97+
v-model="tab" :items="items" :ui="{
98+
wrapper: 'relative space-y-0',
99+
}"
100+
>
95101
<template #default="{ item, selected }">
96102
<div class="flex items-center gap-2 relative truncate">
97103
<UIcon :name="item.icon" class="w-7 h-7 flex-shrink-0" />

‎client/components/CommandPalette.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@ function onSelect(option: Email) {
5353
>
5454
<template #empty-state>
5555
<div class="flex flex-col text-center items-center justify-center flex-1 px-6 py-14 sm:px-14">
56-
<span class="i-heroicons-magnifying-glass-20-solid w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4" aria-hidden="true"></span>
57-
<p class="text-sm text-center text-gray-900 dark:text-white">We couldn't find any email template.</p>
56+
<span class="i-heroicons-magnifying-glass-20-solid w-6 h-6 mx-auto text-gray-400 dark:text-gray-500 mb-4" aria-hidden="true" />
57+
<p class="text-sm text-center text-gray-900 dark:text-white">
58+
We couldn't find any email template.
59+
</p>
5860

5961
<p class="mt-2 mb-4 text-sm text-gray-300 font-normal">
6062
You can create a

‎client/components/EmailPreview.vue

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,16 @@ const emailSubject = ref('Testing Vue Email')
3333
function handleView(view: ActiveView) {
3434
activeView.value = view
3535
router.push(`${route.path}?view=${view}`)
36-
if (iframeUpdate.value >= 100) iframeUpdate.value = 0
36+
if (iframeUpdate.value >= 100)
37+
iframeUpdate.value = 0
3738
iframeUpdate.value++
3839
}
3940
4041
async function updateIframe() {
4142
refresh.value = !refresh.value
4243
43-
if (iframeUpdate.value >= 100) iframeUpdate.value = 0
44+
if (iframeUpdate.value >= 100)
45+
iframeUpdate.value = 0
4446
iframeUpdate.value++
4547
}
4648
@@ -50,10 +52,12 @@ function setlang(lang: ActiveLang) {
5052
}
5153
5254
watchEffect(() => {
53-
if (query.view === 'source' || query.view === 'desktop' || query.view === 'mobile') activeView.value = query.view
55+
if (query.view === 'source' || query.view === 'desktop' || query.view === 'mobile')
56+
activeView.value = query.view
5457
5558
if (query.lang) {
56-
if (['html'].includes(query.lang)) activeLang.value = query.lang
59+
if (['html'].includes(query.lang))
60+
activeLang.value = query.lang
5761
}
5862
})
5963
</script>
@@ -99,9 +103,7 @@ watchEffect(() => {
99103
<UInput id="to" v-model="emailSubject" type="text" color="gray" variant="outline" placeholder="My Email" />
100104

101105
<div class="flex items-center justify-between mt-3">
102-
<span class="inline-block text-xs text-gray-100 font-normal"
103-
>Powered by <a class="hover:text-gray-100 transition ease-in-out duration-300" href="https://resend.com" target="_blank" rel="noreferrer">Resend</a></span
104-
>
106+
<span class="inline-block text-xs text-gray-100 font-normal">Powered by <a class="hover:text-gray-100 transition ease-in-out duration-300" href="https://resend.com" target="_blank" rel="noreferrer">Resend</a></span>
105107
<UButton
106108
color="primary"
107109
:disabled="!sending && (!emailTo || !emailSubject) && (emailSubject.trim().length === 0 || emailTo.trim().length === 0)"

‎client/components/EmptyState.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,9 @@ const items = [
5050
<div class="max-w-3xl px-4 md:px-8 py-10 md:py-20">
5151
<div class="text-center">
5252
<UIcon name="i-twemoji-incoming-envelope" class="w-20 h-20" />
53-
<h2 class="text-xl text-gray-800 dark:text-gray-100 font-medium">Welcome to the Vue Email Dev Tools!</h2>
53+
<h2 class="text-xl text-gray-800 dark:text-gray-100 font-medium">
54+
Welcome to the Vue Email Dev Tools!
55+
</h2>
5456
<p class="mt-2 mb-4 text-sm text-gray-800 dark:text-gray-100 font-normal">
5557
To start developing your next email template, you can create a
5658
<UKbd>.vue</UKbd> file under the <UKbd>emails</UKbd> folder.
@@ -69,7 +71,9 @@ const items = [
6971
<span>{{ item.title }}</span>
7072
<span aria-hidden="true"> &rarr;</span>
7173
</h3>
72-
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ item.description }}</p>
74+
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
75+
{{ item.description }}
76+
</p>
7377
</div>
7478
</NuxtLink>
7579
</li>

‎client/components/SendEmail.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,8 @@ defineShortcuts({
3434
<UInput id="to" v-model="emailSubject" type="text" color="gray" variant="outline" placeholder="My Email" />
3535

3636
<div class="flex items-center justify-between mt-3">
37-
<span class="inline-block text-xs text-gray-100 font-normal"
38-
>Powered by
39-
<a class="hover:text-gray-100 transition ease-in-out underline underline-offset-2 duration-300" href="https://resend.com" target="_blank" rel="noreferrer"
40-
>Resend</a
41-
></span
42-
>
37+
<span class="inline-block text-xs text-gray-100 font-normal">Powered by
38+
<a class="hover:text-gray-100 transition ease-in-out underline underline-offset-2 duration-300" href="https://resend.com" target="_blank" rel="noreferrer">Resend</a></span>
4339
<UButton
4440
color="primary"
4541
:disabled="!sending && (!emailTo || !emailSubject) && (emailSubject.trim().length === 0 || emailTo.trim().length === 0)"

‎client/components/Settings.vue

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,23 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
77
<div class="p-6 flex flex-col gap-y-7">
88
<div class="flex justify-between items-center">
99
<div class="flex flex-col content-center text-sm">
10-
<p class="block font-medium text-gray-700 dark:text-gray-200">Horizontal Split</p>
11-
<p class="text-gray-500 dark:text-gray-400 text-sm">Split the email preview and code editor horizontally</p>
10+
<p class="block font-medium text-gray-700 dark:text-gray-200">
11+
Horizontal Split
12+
</p>
13+
<p class="text-gray-500 dark:text-gray-400 text-sm">
14+
Split the email preview and code editor horizontally
15+
</p>
1216
</div>
1317
<UToggle v-model="horizontalSplit" />
1418
</div>
1519
<div class="flex justify-between items-center">
1620
<div class="flex flex-col content-center text-sm">
17-
<p class="block font-medium text-gray-700 dark:text-gray-200">Preview Mode</p>
18-
<p class="text-gray-500 dark:text-gray-400 text-sm">Choose between the preview modes</p>
21+
<p class="block font-medium text-gray-700 dark:text-gray-200">
22+
Preview Mode
23+
</p>
24+
<p class="text-gray-500 dark:text-gray-400 text-sm">
25+
Choose between the preview modes
26+
</p>
1927
</div>
2028
<USelectMenu v-model="previewMode" class="min-w-[100px]" :options="previewModes">
2129
<template v-if="previewMode" #label>
@@ -26,8 +34,12 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
2634
</div>
2735
<div class="flex justify-between items-center">
2836
<div class="flex flex-col content-center text-sm">
29-
<p class="block font-medium text-gray-700 dark:text-gray-200">Editor Language</p>
30-
<p class="text-gray-500 dark:text-gray-400 text-sm">Choose which code language to display in the editor</p>
37+
<p class="block font-medium text-gray-700 dark:text-gray-200">
38+
Editor Language
39+
</p>
40+
<p class="text-gray-500 dark:text-gray-400 text-sm">
41+
Choose which code language to display in the editor
42+
</p>
3143
</div>
3244
<USelectMenu v-model="editorCode" class="min-w-[100px]" :options="editorCodes">
3345
<template v-if="editorCode" #label>
@@ -36,10 +48,10 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
3648
</template>
3749
</USelectMenu>
3850
</div>
39-
<hr class="border-gray-700" />
51+
<hr class="border-gray-700">
4052
<UFormGroup class="" size="sm" label="Email" description="The email address that will be used to send the test emails">
41-
<UInput v-model="email" class="mt-2" placeholder="you@example.com" icon="i-heroicons-envelope"
42-
/></UFormGroup>
53+
<UInput v-model="email" class="mt-2" placeholder="you@example.com" icon="i-heroicons-envelope" />
54+
</UFormGroup>
4355
</div>
4456
</UModal>
4557
</template>

‎client/components/TopNav.vue

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@ import { version } from '../../package.json'
88
<div class="flex items-center gap-2 text-xl">
99
<NuxtLink to="/" class="flex items-center gap-2">
1010
<UIcon name="i-twemoji-incoming-envelope" />
11-
<h2 class="font-semibold text-gray-900 dark:text-white leading-tight">Vue Email</h2>
11+
<h2 class="font-semibold text-gray-900 dark:text-white leading-tight">
12+
Vue Email
13+
</h2>
1214
</NuxtLink>
1315
<NuxtLink class="flex items-center gap-2" target="_blank" :to="`https://github.com/vue-email/nuxt/releases/tag/v${version}`">
14-
<UBadge color="primary" variant="subtle"> v{{ version }} </UBadge>
16+
<UBadge color="primary" variant="subtle">
17+
v{{ version }}
18+
</UBadge>
1519
</NuxtLink>
1620
</div>
1721

‎client/composables/shiki.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ getHighlighter({
1313
})
1414

1515
export function highlight(code: string, lang: string) {
16-
if (!shiki.value) return code
16+
if (!shiki.value)
17+
return code
1718
return shiki.value.codeToHtml(code, {
1819
lang,
1920
theme: 'vitesse-dark',

‎client/composables/useEmail.ts

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import pretty from 'pretty'
2-
import type { Email } from '@/types/email'
32
import type { Result } from '@vue-email/compiler'
3+
import type { Email } from '@/types/email'
44

55
export function useEmail() {
66
const emails = useState<Email[]>('emails')
@@ -25,45 +25,48 @@ export function useEmail() {
2525
return
2626
}
2727

28-
if (data && data.value) {
28+
if (data && data.value)
2929
emails.value = data.value
30-
}
3130
}
3231

3332
const renderEmail = async () => {
34-
if (!email.value) return null
33+
if (!email.value)
34+
return null
3535

3636
const { data } = await useFetch<Result>(`/api/render/${email.value.filename}`, {
3737
baseURL: host.value,
3838
})
3939

40-
if (data.value)
40+
if (data.value) {
4141
return {
4242
vue: email.value.content,
4343
html: pretty(data.value.html),
4444
txt: data.value.text,
4545
}
46+
}
4647

4748
return null
4849
}
4950

5051
const getEmail = async (filename: string) => {
5152
if (filename && emails.value && emails.value.length) {
52-
const found = emails.value.find((email) => email.filename === filename)
53+
const found = emails.value.find(email => email.filename === filename)
5354

5455
if (found) {
5556
email.value = found
5657

5758
await renderEmail().then((value) => {
58-
if (value) template.value = value
59+
if (value)
60+
template.value = value
5961
})
6062
}
6163
}
6264
}
6365

6466
const sendTestEmail = async (to: string, subject: string, markup: string) => {
6567
try {
66-
if (!email || !subject) return
68+
if (!email || !subject)
69+
return
6770

6871
sending.value = true
6972

@@ -96,14 +99,16 @@ export function useEmail() {
9699
icon: 'i-ph-bell-bold',
97100
})
98101
}
99-
} catch (error) {
102+
}
103+
catch (error) {
100104
useToast().add({
101105
title: 'Error',
102106
description: 'Something went wrong. Please try again.',
103107
color: 'red',
104108
icon: 'i-ph-bell-bold',
105109
})
106-
} finally {
110+
}
111+
finally {
107112
sending.value = false
108113
}
109114
}

‎client/composables/useTool.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,11 @@ export function useTool(params?: UseToolParams) {
5858
const editorCode = useStorage<editorCodes>('editorCodes', editorCodes[0])
5959

6060
watch(reloadTemplate, async () => {
61-
if (typeof params?.onReload == 'undefined' && typeof params?.onReload !== 'function' && !reloadTemplate.value) {
61+
if (typeof params?.onReload == 'undefined' && typeof params?.onReload !== 'function' && !reloadTemplate.value)
6262
return
63-
}
6463

65-
if (typeof params?.onReload === 'function') {
64+
if (typeof params?.onReload === 'function')
6665
await params.onReload()
67-
}
6866

6967
setTimeout(() => {
7068
reloadTemplate.value = false

‎client/emails/code-components.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ const box = {
1515
padding: '0 48px',
1616
}
1717
18-
1918
const code = `import { codeToThemedTokens } from 'shikiji'
2019
2120
const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy