112 lines
3.6 KiB
Vue
112 lines
3.6 KiB
Vue
<template>
|
|
<div class="py-8" ref="container">
|
|
<div class="text-center text-2xl py-4 border-t-4">À propos de vous</div>
|
|
<div class="px-5 relative">
|
|
<div class="flex flex-col space-y-4">
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Prénom</label>
|
|
</div>
|
|
<v-text-field v-model="firstName" label="Prénom" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Nom</label>
|
|
</div>
|
|
<v-text-field v-model="lastName" label="Nom" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Occupation</label>
|
|
</div>
|
|
<v-text-field v-model="occupation" label="Occupation" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Courriel</label>
|
|
</div>
|
|
<v-text-field v-model="email" label="Courriel" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Téléphone</label>
|
|
</div>
|
|
<v-text-field v-model="phone" label="Téléphone" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Date de naissance (JJ/MM/AAAA)</label>
|
|
</div>
|
|
<v-text-field v-model="birthDate" label="Date de naissance" variant="outlined"
|
|
:rules="[dateRule]"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Pays</label>
|
|
</div>
|
|
<v-text-field v-model="country" label="Pays" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Ville</label>
|
|
</div>
|
|
<v-text-field v-model="city" label="Ville" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Adresse</label>
|
|
</div>
|
|
<v-text-field v-model="address" label="Adresse" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Titre A propos</label>
|
|
</div>
|
|
<v-text-field v-model="titre" label="Titre A propos" variant="outlined"></v-text-field>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<label class="text-lg">Description</label>
|
|
</div>
|
|
<v-textarea v-model="description" label="Description" variant="outlined"></v-textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const firstName = ref('');
|
|
const lastName = ref('');
|
|
const occupation = ref('');
|
|
const email = ref('');
|
|
const phone = ref('');
|
|
const birthDate = ref('');
|
|
const country = ref('');
|
|
const city = ref('');
|
|
const address = ref('');
|
|
const titre = ref('');
|
|
const description = ref('');
|
|
|
|
const dateRule = value => {
|
|
const datePattern = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/(19|20)\d{2}$/;
|
|
return datePattern.test(value) || 'Format de date invalide (JJ/MM/AAAA)';
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Votre style ici */
|
|
</style>
|