bert.hausmans
4074dce402
Replace monolithic register/[eventSlug].vue with composable field renderer, conditional-logic engine, stepper, and per-field components driven by Form Builder schema. Adds flatpickr for date fields. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
81 lines
2.1 KiB
Vue
81 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { emailValidator, requiredValidator } from '@core/utils/validators'
|
|
|
|
const props = defineProps<{
|
|
name: string
|
|
email: string
|
|
errors?: { name?: string; email?: string }
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:name', v: string): void
|
|
(e: 'update:email', v: string): void
|
|
(e: 'blur'): void
|
|
}>()
|
|
|
|
const nameModel = computed({
|
|
get: () => props.name,
|
|
set: v => emit('update:name', v),
|
|
})
|
|
const emailModel = computed({
|
|
get: () => props.email,
|
|
set: v => emit('update:email', v),
|
|
})
|
|
|
|
const nameRules = [
|
|
(v: unknown) => (requiredValidator(v) === true ? true : 'Vul je naam in.'),
|
|
(v: unknown) => (v === null || v === undefined || String(v).length <= 150 ? true : 'Maximaal 150 tekens.'),
|
|
]
|
|
const emailRules = [
|
|
(v: unknown) => (requiredValidator(v) === true ? true : 'Vul je e-mailadres in.'),
|
|
(v: unknown) => (emailValidator(v) === true ? true : 'Vul een geldig e-mailadres in.'),
|
|
(v: unknown) => (v === null || v === undefined || String(v).length <= 255 ? true : 'Maximaal 255 tekens.'),
|
|
]
|
|
|
|
const nameError = computed(() => props.errors?.name ? [props.errors.name] : [])
|
|
const emailError = computed(() => props.errors?.email ? [props.errors.email] : [])
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<AppTextField
|
|
v-model="nameModel"
|
|
label="Naam *"
|
|
placeholder="Voor- en achternaam"
|
|
autocomplete="name"
|
|
:rules="nameRules"
|
|
:error-messages="nameError"
|
|
:maxlength="150"
|
|
@blur="emit('blur')"
|
|
/>
|
|
</VCol>
|
|
<VCol
|
|
cols="12"
|
|
sm="6"
|
|
>
|
|
<AppTextField
|
|
v-model="emailModel"
|
|
type="email"
|
|
inputmode="email"
|
|
autocomplete="email"
|
|
label="E-mailadres *"
|
|
placeholder="je@email.nl"
|
|
prepend-inner-icon="tabler-mail"
|
|
:rules="emailRules"
|
|
:error-messages="emailError"
|
|
:maxlength="255"
|
|
@blur="emit('blur')"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<p class="text-caption text-medium-emphasis mb-0">
|
|
We gebruiken je gegevens alleen om contact op te nemen over deze aanvraag.
|
|
</p>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|