tristan
898bc0f761
All checks were successful
Release / release (push) Successful in 58s
| Numéro du ticket | Titre du ticket | |------------------|-----------------| | | | ## Description de la PR ## Modification du .env ## Check list - [ ] Pas de régression - [ ] TU/TI/TF rédigée - [ ] TU/TI/TF OK - [ ] CHANGELOG modifié Co-authored-by: kevin <kevin@yuno.malio.fr> Reviewed-on: #8 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
102 lines
2.5 KiB
Vue
102 lines
2.5 KiB
Vue
<template>
|
|
<div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Simple</h2>
|
|
<MalioCheckbox
|
|
v-model="simpleValue"
|
|
label="Accepter les conditions"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Coche par default</h2>
|
|
<MalioCheckbox
|
|
v-model="checkedValue"
|
|
label="Recevoir la newsletter"
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Hint</h2>
|
|
<MalioCheckbox
|
|
v-model="hintValue"
|
|
label="J'accepte le traitement des donnees"
|
|
hint="Vous pouvez retirer votre consentement a tout moment."
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Erreur</h2>
|
|
<MalioCheckbox
|
|
:model-value="false"
|
|
label="Accepter les CGU"
|
|
error="Ce champ est obligatoire."
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Succès</h2>
|
|
<MalioCheckbox
|
|
:model-value="true"
|
|
label="Adresse vérifiée"
|
|
success="Choix valide."
|
|
/>
|
|
</div>
|
|
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
|
|
<div class="space-y-4">
|
|
<MalioCheckbox
|
|
:model-value="true"
|
|
label="Option désactivée"
|
|
disabled
|
|
/>
|
|
<MalioCheckbox
|
|
:model-value="true"
|
|
label="Option readonly"
|
|
readonly
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
|
|
<div class="space-y-4">
|
|
<MalioCheckbox
|
|
label="Option 1"
|
|
/>
|
|
<MalioCheckbox
|
|
label="Option 2"
|
|
/>
|
|
<MalioCheckbox
|
|
label="Option 3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="rounded-lg border p-4">
|
|
<h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
|
|
<div class="space-y-4">
|
|
<MalioCheckbox
|
|
v-for="option in options"
|
|
:key="option"
|
|
:label="option"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
|
|
const simpleValue = ref(false)
|
|
const checkedValue = ref(true)
|
|
const hintValue = ref(false)
|
|
const options = [
|
|
'Option A',
|
|
'Option B',
|
|
'Option C',
|
|
'Option D',
|
|
|
|
]
|
|
</script>
|