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>

0 commit comments

Comments
 (0)