Composants
CivilityGroup
Composant de sélection de civilité avec chargement depuis l'API
Composant de sélection de civilité qui charge les options depuis l'API et les affiche sous forme de boutons radio horizontaux.
Usage
Basic
Utilisez le composant CivilityGroup avec un v-model :
<template>
<CivilityGroup v-model="civility" />
</template>
<script setup>
const civility = ref('');
</script>
Avec formulaire
<template>
<UForm :state="form">
<UFormGroup label="Civilité" name="civility">
<CivilityGroup v-model="form.civility" />
</UFormGroup>
</UForm>
</template>
<script setup>
const form = reactive({
civility: ''
});
</script>
API
Props
Ce composant n'accepte aucune prop explicite. Il utilise defineModel pour la valeur.
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Émis lorsque l'utilisateur sélectionne une civilité (IRI de l'entité) |
Slots
Ce composant n'expose aucun slot.
Exemples
Exemple 1 : Utilisation simple
<template>
<CivilityGroup v-model="selectedCivility" />
</template>
<script setup>
const selectedCivility = ref('');
</script>
Exemple 2 : Avec validation
<template>
<UForm :state="form" :schema="schema">
<UFormGroup label="Civilité" name="civility" required>
<CivilityGroup v-model="form.civility" />
</UFormGroup>
<UButton type="submit">Valider</UButton>
</UForm>
</template>
<script setup>
import { z } from 'zod';
const schema = z.object({
civility: z.string().min(1, 'La civilité est requise')
});
const form = reactive({
civility: ''
});
</script>
Notes
Le composant charge automatiquement les civilités depuis /api/civilities avec authentification JWT. Les données sont mises en cache via useNuxtData pour éviter les appels redondants. Le composant transforme les données de l'API en format compatible avec URadioGroup de Nuxt UI.