MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : suppression du doublon du composant Checkbox

Browse Source
This commit is contained in:
Autin
2026-04-07 14:30:06 +02:00
parent e1965db04e
commit 32608c8f71
6 changed files with 10 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
.playground/pages/composant/checkbox.vue
View File

@@ -1,101 +0,0 @@
<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>