feat: add AInput components (#6)

Closes #6

Author: Norbiros

docs/app/components/examples/AInput.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { AInputPasswordToggle, AInputWithClear }
+  from '#components'
+import * as z from 'zod'
+
+const schema = z.object({
+  with_clear: z.string()
+    .default('Press to clear!')
+    .meta({
+      input: {
+        component: AInputWithClear,
+      },
+    }),
+  password: z.string().meta({
+    input: {
+      component: AInputPasswordToggle,
+    },
+  }),
+})
+</script>
+
+<template>
+  <AutoForm :schema="schema" />
+</template>

docs/content/2.customization/4.submit_button.md

@@ -21,13 +21,17 @@ export default defineAppConfig({
 
 ## Custom component
 
-If it is not sufficient and you want to create completly custom component for submit button you can do that as well.
+If it is not sufficient, and you want to create completely custom component for submit button you can do that as well.
 
 ::caution
 If you use string to define the component it **must** be [globally registered](https://nuxt.com/docs/4.x/guide/directory-structure/app/components#dynamic-components) to work.
 To do this, name your component with the `.global.vue` suffix, or place it in `components/global/` directory.
 ::
 
+::tip
+To learn more about importing and registering components, visit the [components](/customization/config#components) sections of config docs.
+::
+
 ```ts [app.config.ts]{3-5}
 export default defineAppConfig({
   autoForm: {

docs/content/3.components/2.input.md

@@ -0,0 +1,22 @@
+---
+title: <AInput */>
+description: UInput components with custom features
+---
+
+Nuxt Auto Form aims to make form creation as effortless as possible.
+To achieve this, we provide a set of reusable input components that come with enhanced functionality out of the box.
+
+::tip
+To read more about customizing `UInput` field visit the [Input customization](/customization/fields#input-customization) docs.
+::
+
+## Components
+
+| Prop                       | Source                                                                                                                       | Notes                                                                                                                                       |
+|----------------------------|------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
+| `<AInputPasswordToggle />` | [PasswordToggle.vue](https://github.com/Norbiros/nuxt-auto-form/blob/master/src/runtime/components/input/PasswordToggle.vue) | Adds a toggle to show/hide passwords. Based on Nuxt UI's [example](https://ui.nuxt.com/components/input#with-password-toggle) code          |
+| `<AInputWithClear />`      | [WithClear.vue](https://github.com/Norbiros/nuxt-auto-form/blob/master/src/runtime/components/input/PasswordToggle.vue)      | Adds a clear button to easily reset input values. Based on Nuxt UI's [example](https://ui.nuxt.com/components/input#with-clear-button) code |
+
+## Example
+
+::component-preview{name="AInput"}

playground/app/components/MyForm.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { AInputPasswordToggle } from '#components'
 import * as z from 'zod'
-import InputWithClear from '~/components/InputWithClear.vue'
 
 const ENUM_MULTIPLE = [
   'A',
@@ -34,7 +34,7 @@ const schema = z.object({
       description: 'with description',
       hint: 'with hint',
       input: {
-        component: InputWithClear,
+        component: AInputPasswordToggle,
       },
     }),
   custom_bool: z.boolean()
@@ -48,6 +48,7 @@ const schema = z.object({
   multiple_input: z
     .array(z.enum(ENUM_MULTIPLE))
     .meta({ title: 'Multiple Enum Input' }),
+  password: z.string().nonempty().meta({ input: { component: APasswordToggle } }),
 })
 
 function onSubmit(data: Record<string, any>) {

src/module.ts

@@ -1,4 +1,4 @@
-import { addComponent, addTypeTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addComponent, addComponentsDir, addTypeTemplate, createResolver, defineNuxtModule } from '@nuxt/kit'
 import { ensureDependencies } from './utils/packages'
 
 // Module options TypeScript interface definition
@@ -29,8 +29,13 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     addComponent({
-      name: 'AutoForm', // name of the component to be used in vue templates
+      name: 'AutoForm',
       filePath: resolver.resolve('runtime/components/AutoForm.vue'),
     })
+    addComponentsDir({
+      path: resolver.resolve('runtime/components/input/'),
+      prefix: 'AInput',
+      pathPrefix: false,
+    })
   },
 })

src/runtime/components/AutoForm.vue

@@ -123,7 +123,9 @@ const submitButtonProps = computed(() => {
           :is="field.component"
           v-bind="field.props"
           v-model="(state as Record<string, any>)[field.key]"
-        />
+        >
+          <slot :name="`${field.key}-content`" />
+        </component>
       </slot>
     </UFormField>
 

src/runtime/components/input/PasswordToggle.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import UButton from '@nuxt/ui/components/Button.vue'
+import UInput from '@nuxt/ui/components/Input.vue'
+import { ref } from 'vue'
+
+const show = ref(false)
+const input = defineModel<string>({ default: '' })
+</script>
+
+<template>
+  <UInput
+    v-model="input"
+    :type="show ? 'text' : 'password'"
+    :ui="{ trailing: 'pe-1' }"
+  >
+    <template #trailing>
+      <UButton
+        color="neutral"
+        variant="link"
+        size="sm"
+        :icon="show ? 'i-lucide-eye-off' : 'i-lucide-eye'"
+        :aria-label="show ? 'Hide password' : 'Show password'"
+        :aria-pressed="show"
+        aria-controls="password"
+        @click="show = !show"
+      />
+    </template>
+  </UInput>
+</template>
+
+<style>
+/* Hide the password reveal button in Edge */
+::-ms-reveal {
+    display: none;
+}
+</style>

…ground/app/components/InputWithClear.vue …c/runtime/components/input/WithClear.vueplayground/app/components/InputWithClear.vue renamed to src/runtime/components/input/WithClear.vue playground/app/components/InputWithClear.vue renamed to src/runtime/components/input/WithClear.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-const modelValue = defineModel<string>({ default: 'Click to clear' })
+import UButton from '@nuxt/ui/components/Button.vue'
+import UInput from '@nuxt/ui/components/Input.vue'
+
+const modelValue = defineModel<string>({ default: '' })
 </script>
 
 <template>
   <UInput
     v-model="modelValue"
-    placeholder="Type something..."
     :ui="{ trailing: 'pe-1' }"
   >
     <template v-if="modelValue?.length" #trailing>