f8572c3386
- Add authentication middleware to protect routes - Create API endpoints for login, logout, registration, and user info - Develop UI components for login and registration forms - Integrate VeeValidate for form validation - Update environment configuration for Cidaas settings - Add i18n support for English and German languages - Enhance Tailwind CSS for improved styling of auth components - Document authentication flow and testing procedures
140 lines
3.0 KiB
Markdown
140 lines
3.0 KiB
Markdown
# Input Component
|
|
|
|
shadcn-nuxt Input component with TypeScript support and variants.
|
|
|
|
## Features
|
|
|
|
- **Two-way binding** - Full v-model support
|
|
- **Variants** - Default and error states
|
|
- **Sizes** - Small, default, and large
|
|
- **TypeScript** - Full type safety
|
|
- **All HTML input types** - text, email, password, number, etc.
|
|
|
|
## Basic Usage
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
const email = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<Input v-model="email" type="email" placeholder="Enter your email" />
|
|
</template>
|
|
```
|
|
|
|
## With VeeValidate Form
|
|
|
|
```vue
|
|
<script setup lang="ts">
|
|
import { useForm } from 'vee-validate'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { z } from 'zod'
|
|
import {
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormControl,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
const formSchema = toTypedSchema(
|
|
z.object({
|
|
email: z.string().email('Please enter a valid email'),
|
|
})
|
|
)
|
|
|
|
const form = useForm({
|
|
validationSchema: formSchema,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<form @submit="form.handleSubmit((values) => console.log(values))">
|
|
<FormField v-slot="{ field }" name="email">
|
|
<FormItem>
|
|
<FormLabel>Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
v-bind="field"
|
|
type="email"
|
|
placeholder="you@example.com"
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
</FormField>
|
|
</form>
|
|
</template>
|
|
```
|
|
|
|
## Variants
|
|
|
|
```vue
|
|
<!-- Default -->
|
|
<Input v-model="value" />
|
|
|
|
<!-- Error state (use with form validation) -->
|
|
<Input v-model="value" variant="error" />
|
|
```
|
|
|
|
## Sizes
|
|
|
|
```vue
|
|
<!-- Small -->
|
|
<Input v-model="value" size="sm" />
|
|
|
|
<!-- Default -->
|
|
<Input v-model="value" size="default" />
|
|
|
|
<!-- Large -->
|
|
<Input v-model="value" size="lg" />
|
|
```
|
|
|
|
## Input Types
|
|
|
|
```vue
|
|
<!-- Text (default) -->
|
|
<Input v-model="text" type="text" />
|
|
|
|
<!-- Email -->
|
|
<Input v-model="email" type="email" />
|
|
|
|
<!-- Password -->
|
|
<Input v-model="password" type="password" />
|
|
|
|
<!-- Number -->
|
|
<Input v-model="age" type="number" />
|
|
|
|
<!-- Date -->
|
|
<Input v-model="date" type="date" />
|
|
|
|
<!-- Search -->
|
|
<Input v-model="query" type="search" />
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| modelValue | string \| number | undefined | The input value |
|
|
| type | string | 'text' | HTML input type |
|
|
| placeholder | string | undefined | Placeholder text |
|
|
| disabled | boolean | false | Disable the input |
|
|
| required | boolean | false | Mark as required |
|
|
| name | string | undefined | Input name attribute |
|
|
| id | string | undefined | Input ID attribute |
|
|
| autocomplete | string | undefined | Autocomplete attribute |
|
|
| variant | 'default' \| 'error' | 'default' | Visual variant |
|
|
| size | 'sm' \| 'default' \| 'lg' | 'default' | Input size |
|
|
| class | string | undefined | Additional CSS classes |
|
|
|
|
## Events
|
|
|
|
| Event | Payload | Description |
|
|
|-------|---------|-------------|
|
|
| update:modelValue | string \| number | Emitted when value changes |
|