feature: Add unstyled and fully configurable component

Author: roncallyt

playground/app.vue

@@ -1,8 +1,33 @@
 <template>
   <div>
-    <ListmonkForm />
+    <ListmonkForm>
+      <ListmonkInputGroup
+        id="input-email"
+        label="E-mail"
+      >
+        <template #default="inputProps">
+          <ListmonkInput
+            :id="inputProps.id"
+            field="email"
+            type="email"
+            required
+          />
+        </template>
+      </ListmonkInputGroup>
+
+      <ListmonkInputGroup
+        id="input-name"
+        label="Name"
+      >
+        <template #default="inputProps">
+          <ListmonkInput
+            :id="inputProps.id"
+            field="name"
+          />
+        </template>
+      </ListmonkInputGroup>
+
+      <ListmonkButton title="Send" />
+    </ListmonkForm>
   </div>
 </template>
-
-<script setup lang="ts">
-</script>

src/module.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'node:url'
-import { defineNuxtModule, createResolver, addComponent, addServerHandler, addImportsDir } from '@nuxt/kit'
+import { defineNuxtModule, createResolver, addServerHandler, addImportsDir, addComponentsDir } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { NuxtModule } from 'nuxt/schema'
 
@@ -43,10 +43,9 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
 
     addImportsDir(resolve(runtimeDir, 'composables'))
 
-    addComponent({
-      filePath: resolve(runtimeDir, 'components/ListmonkForm.vue'),
-      name: 'ListmonkForm',
+    addComponentsDir({
       global: true,
+      path: resolve(runtimeDir, 'components'),
     })
 
     addServerHandler({

src/runtime/components/ListmonkButton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  type?: string
+  title: string
+}>()
+</script>
+
+<template>
+  <button
+    :type="type || 'submit'"
+  >
+    {{ title }}
+  </button>
+</template>

src/runtime/components/ListmonkForm.vue

@@ -4,6 +4,9 @@ const emit = defineEmits(['subscribed'])
 const email = ref('')
 const name = ref('')
 
+provide('email', email)
+provide('name', name)
+
 async function submit() {
   const subscriber = {
     email: email.value,
@@ -17,27 +20,9 @@ async function submit() {
 </script>
 
 <template>
-  <form @submit.prevent="submit">
-    <div>
-      <input
-        v-model="email"
-        type="email"
-        name="email"
-        placeholder="E-mail"
-      >
-    </div>
-
-    <div>
-      <input
-        v-model="name"
-        type="text"
-        name="name"
-        placeholder="Nome"
-      >
-    </div>
-
-    <button type="submit">
-      Enviar
-    </button>
+  <form
+    @submit.prevent="submit"
+  >
+    <slot />
   </form>
 </template>

src/runtime/components/ListmonkInput.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{
+  field: 'email' | 'name'
+  id?: string
+  required?: boolean
+  type?: string
+  placeholder?: string
+}>()
+
+const field = inject(props.field)
+</script>
+
+<template>
+  <input
+    :id="id || ''"
+    v-model="field"
+    :type="type || 'text'"
+    :required="required || false"
+    :placeholder="placeholder || ''"
+  >
+</template>

src/runtime/components/ListmonkInputGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  id: string
+  label: string
+}>()
+</script>
+
+<template>
+  <div>
+    <label :for="id">{{ label }}</label>
+
+    <slot :id="id" />
+  </div>
+</template>