feat: get props from components

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "format/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ]
+}

README.md

@@ -1,6 +1,5 @@
 [![vue-email](https://github.com/vue-email/vue-email/blob/main/public/repo-banner.png?raw=true)](https://vuemail.net)
 
-
 <div align="center">
 
 [![npm version][npm-version-src]][npm-version-href]
@@ -90,7 +89,6 @@ npm run release
 
 [MIT](./LICENSE) License © 2023-PRESENT [Vue Email](https://vuemail.net/)
 
-
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/@vue-email/nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/@vue-email/nuxt

client/components/CodeContainer.vue

@@ -59,21 +59,24 @@ const items = computed(() => {
         code: template.value.txt,
       },
     ]
-  } else if (editorCode.value.id === 'html') {
+  }
+  else if (editorCode.value.id === 'html') {
     arr.push({
       key: 'html',
       label: 'HTML',
       icon: 'i-ph-file-html-duotone',
       code: template.value.html,
     })
-  } else if (editorCode.value.id === 'txt') {
+  }
+  else if (editorCode.value.id === 'txt') {
     arr.push({
       key: 'txt',
       label: 'Plain Text',
       icon: 'i-ph-text-t-duotone',
       code: template.value.txt,
     })
-  } else if (editorCode.value.id === 'vue') {
+  }
+  else if (editorCode.value.id === 'vue') {
     arr.push({
       key: 'vue',
       label: 'Vue',
@@ -89,9 +92,12 @@ const tab = ref(0)
 </script>
 
 <template>
-  <UTabs v-model="tab" :items="items" :ui="{
-    wrapper: 'relative space-y-0'
-  }">
+  {{ email.props }}
+  <UTabs
+    v-model="tab" :items="items" :ui="{
+      wrapper: 'relative space-y-0',
+    }"
+  >
     <template #default="{ item, selected }">
       <div class="flex items-center gap-2 relative truncate">
         <UIcon :name="item.icon" class="w-7 h-7 flex-shrink-0" />

client/components/CommandPalette.vue

@@ -53,8 +53,10 @@ function onSelect(option: Email) {
     >
       <template #empty-state>
         <div class="flex flex-col text-center items-center justify-center flex-1 px-6 py-14 sm:px-14">
-          <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>
-          <p class="text-sm text-center text-gray-900 dark:text-white">We couldn't find any email template.</p>
+          <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" />
+          <p class="text-sm text-center text-gray-900 dark:text-white">
+            We couldn't find any email template.
+          </p>
 
           <p class="mt-2 mb-4 text-sm text-gray-300 font-normal">
             You can create a

client/components/EmailPreview.vue

@@ -33,14 +33,16 @@ const emailSubject = ref('Testing Vue Email')
 function handleView(view: ActiveView) {
   activeView.value = view
   router.push(`${route.path}?view=${view}`)
-  if (iframeUpdate.value >= 100) iframeUpdate.value = 0
+  if (iframeUpdate.value >= 100)
+    iframeUpdate.value = 0
   iframeUpdate.value++
 }
 
 async function updateIframe() {
   refresh.value = !refresh.value
 
-  if (iframeUpdate.value >= 100) iframeUpdate.value = 0
+  if (iframeUpdate.value >= 100)
+    iframeUpdate.value = 0
   iframeUpdate.value++
 }
 
@@ -50,10 +52,12 @@ function setlang(lang: ActiveLang) {
 }
 
 watchEffect(() => {
-  if (query.view === 'source' || query.view === 'desktop' || query.view === 'mobile') activeView.value = query.view
+  if (query.view === 'source' || query.view === 'desktop' || query.view === 'mobile')
+    activeView.value = query.view
 
   if (query.lang) {
-    if (['html'].includes(query.lang)) activeLang.value = query.lang
+    if (['html'].includes(query.lang))
+      activeLang.value = query.lang
   }
 })
 </script>
@@ -99,9 +103,7 @@ watchEffect(() => {
           <UInput id="to" v-model="emailSubject" type="text" color="gray" variant="outline" placeholder="My Email" />
 
           <div class="flex items-center justify-between mt-3">
-            <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
-            >
+            <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>
             <UButton
               color="primary"
               :disabled="!sending && (!emailTo || !emailSubject) && (emailSubject.trim().length === 0 || emailTo.trim().length === 0)"

client/components/EmptyState.vue

@@ -50,7 +50,9 @@ const items = [
     <div class="max-w-3xl px-4 md:px-8 py-10 md:py-20">
       <div class="text-center">
         <UIcon name="i-twemoji-incoming-envelope" class="w-20 h-20" />
-        <h2 class="text-xl text-gray-800 dark:text-gray-100 font-medium">Welcome to the Vue Email Dev Tools!</h2>
+        <h2 class="text-xl text-gray-800 dark:text-gray-100 font-medium">
+          Welcome to the Vue Email Dev Tools!
+        </h2>
         <p class="mt-2 mb-4 text-sm text-gray-800 dark:text-gray-100 font-normal">
           To start developing your next email template, you can create a
           <UKbd>.vue</UKbd> file under the <UKbd>emails</UKbd> folder.
@@ -69,7 +71,9 @@ const items = [
                 <span>{{ item.title }}</span>
                 <span aria-hidden="true"> &rarr;</span>
               </h3>
-              <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ item.description }}</p>
+              <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                {{ item.description }}
+              </p>
             </div>
           </NuxtLink>
         </li>

client/components/SendEmail.vue

@@ -34,12 +34,8 @@ defineShortcuts({
       <UInput id="to" v-model="emailSubject" type="text" color="gray" variant="outline" placeholder="My Email" />
 
       <div class="flex items-center justify-between mt-3">
-        <span class="inline-block text-xs text-gray-100 font-normal"
-          >Powered by
-          <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
-        >
+        <span class="inline-block text-xs text-gray-100 font-normal">Powered by
+          <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>
         <UButton
           color="primary"
           :disabled="!sending && (!emailTo || !emailSubject) && (emailSubject.trim().length === 0 || emailTo.trim().length === 0)"

client/components/Settings.vue

@@ -7,15 +7,23 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
     <div class="p-6 flex flex-col gap-y-7">
       <div class="flex justify-between items-center">
         <div class="flex flex-col content-center text-sm">
-          <p class="block font-medium text-gray-700 dark:text-gray-200">Horizontal Split</p>
-          <p class="text-gray-500 dark:text-gray-400 text-sm">Split the email preview and code editor horizontally</p>
+          <p class="block font-medium text-gray-700 dark:text-gray-200">
+            Horizontal Split
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 text-sm">
+            Split the email preview and code editor horizontally
+          </p>
         </div>
         <UToggle v-model="horizontalSplit" />
       </div>
       <div class="flex justify-between items-center">
         <div class="flex flex-col content-center text-sm">
-          <p class="block font-medium text-gray-700 dark:text-gray-200">Preview Mode</p>
-          <p class="text-gray-500 dark:text-gray-400 text-sm">Choose between the preview modes</p>
+          <p class="block font-medium text-gray-700 dark:text-gray-200">
+            Preview Mode
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 text-sm">
+            Choose between the preview modes
+          </p>
         </div>
         <USelectMenu v-model="previewMode" class="min-w-[100px]" :options="previewModes">
           <template v-if="previewMode" #label>
@@ -26,8 +34,12 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
       </div>
       <div class="flex justify-between items-center">
         <div class="flex flex-col content-center text-sm">
-          <p class="block font-medium text-gray-700 dark:text-gray-200">Editor Language</p>
-          <p class="text-gray-500 dark:text-gray-400 text-sm">Choose which code language to display in the editor</p>
+          <p class="block font-medium text-gray-700 dark:text-gray-200">
+            Editor Language
+          </p>
+          <p class="text-gray-500 dark:text-gray-400 text-sm">
+            Choose which code language to display in the editor
+          </p>
         </div>
         <USelectMenu v-model="editorCode" class="min-w-[100px]" :options="editorCodes">
           <template v-if="editorCode" #label>
@@ -36,10 +48,10 @@ const { isSettingsOpen, email, horizontalSplit, previewMode, previewModes, edito
           </template>
         </USelectMenu>
       </div>
-      <hr class="border-gray-700" />
+      <hr class="border-gray-700">
       <UFormGroup class="" size="sm" label="Email" description="The email address that will be used to send the test emails">
-        <UInput v-model="email" class="mt-2" placeholder="[email protected]" icon="i-heroicons-envelope"
-      /></UFormGroup>
+        <UInput v-model="email" class="mt-2" placeholder="[email protected]" icon="i-heroicons-envelope" />
+      </UFormGroup>
     </div>
   </UModal>
 </template>

client/components/TopNav.vue

@@ -8,10 +8,14 @@ import { version } from '../../package.json'
     <div class="flex items-center gap-2 text-xl">
       <NuxtLink to="/" class="flex items-center gap-2">
         <UIcon name="i-twemoji-incoming-envelope" />
-        <h2 class="font-semibold text-gray-900 dark:text-white leading-tight">Vue Email</h2>
+        <h2 class="font-semibold text-gray-900 dark:text-white leading-tight">
+          Vue Email
+        </h2>
       </NuxtLink>
       <NuxtLink class="flex items-center gap-2" target="_blank" :to="`https://github.com/vue-email/nuxt/releases/tag/v${version}`">
-        <UBadge color="primary" variant="subtle"> v{{ version }} </UBadge>
+        <UBadge color="primary" variant="subtle">
+          v{{ version }}
+        </UBadge>
       </NuxtLink>
     </div>
 

client/composables/shiki.ts

@@ -13,7 +13,8 @@ getHighlighter({
 })
 
 export function highlight(code: string, lang: string) {
-  if (!shiki.value) return code
+  if (!shiki.value)
+    return code
   return shiki.value.codeToHtml(code, {
     lang,
     theme: 'vitesse-dark',

client/composables/useEmail.ts

@@ -1,6 +1,6 @@
 import pretty from 'pretty'
-import type { Email } from '@/types/email'
 import type { Result } from '@vue-email/compiler'
+import type { Email } from '@/types/email'
 
 export function useEmail() {
   const emails = useState<Email[]>('emails')
@@ -25,45 +25,48 @@ export function useEmail() {
       return
     }
 
-    if (data && data.value) {
+    if (data && data.value)
       emails.value = data.value
-    }
   }
 
   const renderEmail = async () => {
-    if (!email.value) return null
+    if (!email.value)
+      return null
 
     const { data } = await useFetch<Result>(`/api/render/${email.value.filename}`, {
       baseURL: host.value,
     })
 
-    if (data.value)
+    if (data.value) {
       return {
         vue: email.value.content,
         html: pretty(data.value.html),
         txt: data.value.text,
       }
+    }
 
     return null
   }
 
   const getEmail = async (filename: string) => {
     if (filename && emails.value && emails.value.length) {
-      const found = emails.value.find((email) => email.filename === filename)
+      const found = emails.value.find(email => email.filename === filename)
 
       if (found) {
         email.value = found
 
         await renderEmail().then((value) => {
-          if (value) template.value = value
+          if (value)
+            template.value = value
         })
       }
     }
   }
 
   const sendTestEmail = async (to: string, subject: string, markup: string) => {
     try {
-      if (!email || !subject) return
+      if (!email || !subject)
+        return
 
       sending.value = true
 
@@ -96,14 +99,16 @@ export function useEmail() {
           icon: 'i-ph-bell-bold',
         })
       }
-    } catch (error) {
+    }
+    catch (error) {
       useToast().add({
         title: 'Error',
         description: 'Something went wrong. Please try again.',
         color: 'red',
         icon: 'i-ph-bell-bold',
       })
-    } finally {
+    }
+    finally {
       sending.value = false
     }
   }

client/composables/useTool.ts

@@ -58,13 +58,11 @@ export function useTool(params?: UseToolParams) {
   const editorCode = useStorage<editorCodes>('editorCodes', editorCodes[0])
 
   watch(reloadTemplate, async () => {
-    if (typeof params?.onReload == 'undefined' && typeof params?.onReload !== 'function' && !reloadTemplate.value) {
+    if (typeof params?.onReload == 'undefined' && typeof params?.onReload !== 'function' && !reloadTemplate.value)
       return
-    }
 
-    if (typeof params?.onReload === 'function') {
+    if (typeof params?.onReload === 'function')
       await params.onReload()
-    }
 
     setTimeout(() => {
       reloadTemplate.value = false

client/emails/code-components.vue

@@ -15,7 +15,6 @@ const box = {
   padding: '0 48px',
 }
 
-
 const code = `import { codeToThemedTokens } from 'shikiji'
 
 const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {