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>
115 lines
2.3 KiB
Vue
115 lines
2.3 KiB
Vue
<template>
|
|
<Story title="Input/Checkbox">
|
|
<MalioCheckbox
|
|
v-model="simpleValue"
|
|
label="Accepter les conditions"
|
|
/>
|
|
</Story>
|
|
</template>
|
|
|
|
<docs lang="md">
|
|
# MalioCheckbox
|
|
|
|
Composant checkbox custom avec `v-model`, message d'aide, et états visuels
|
|
`error` / `success`.
|
|
|
|
------------------------------------------------------------------------
|
|
|
|
## Props
|
|
|
|
### id
|
|
|
|
- Type: `string`
|
|
- Description: Identifiant HTML du checkbox.
|
|
- Comportement: si absent, un id unique est généré automatiquement.
|
|
|
|
### label
|
|
|
|
- Type: `string`
|
|
- Description: Texte affiche a cote de la case.
|
|
|
|
### name
|
|
|
|
- Type: `string`
|
|
- Description: Attribut `name` du champ.
|
|
|
|
### modelValue
|
|
|
|
- Type: `boolean | null | undefined`
|
|
- Description: État coche du composant.
|
|
|
|
### inputClass
|
|
|
|
- Type: `string`
|
|
- Description: Classes supplémentaires appliquées a l'input natif.
|
|
|
|
### labelClass
|
|
|
|
- Type: `string`
|
|
- Description: Classes supplémentaires appliquées au label.
|
|
|
|
### groupClass
|
|
|
|
- Type: `string`
|
|
- Description: Classes supplémentaires appliquées au conteneur.
|
|
|
|
### required
|
|
|
|
- Type: `boolean`
|
|
- Description: Ajoute l'attribut HTML `required`.
|
|
|
|
### disabled
|
|
|
|
- Type: `boolean`
|
|
- Description: Désactive le composant.
|
|
|
|
### readonly
|
|
|
|
- Type: `boolean`
|
|
- Description: Empêche la mise a jour du `v-model` tout en gardant
|
|
l'affichage courant.
|
|
|
|
### hint
|
|
|
|
- Type: `string`
|
|
- Description: Message d'aide affiche sous le checkbox.
|
|
|
|
### error
|
|
|
|
- Type: `string`
|
|
- Description: Message d'erreur.
|
|
- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
|
|
d'erreur au texte et a la case.
|
|
|
|
### success
|
|
|
|
- Type: `string`
|
|
- Description: Message de succès.
|
|
- Effet: applique la couleur de succès au texte et a la case si `error`
|
|
est absent.
|
|
|
|
------------------------------------------------------------------------
|
|
|
|
## Accessibilité
|
|
|
|
- `aria-invalid` est active si `error` existe.
|
|
- `aria-describedby` pointe vers le message affiche.
|
|
- L'input natif reste present pour conserver le comportement formulaire.
|
|
|
|
------------------------------------------------------------------------
|
|
|
|
## Event
|
|
|
|
### update:modelValue
|
|
|
|
- Émis a chaque changement de l'état coche.
|
|
- Retourne un booléen `true` ou `false`.
|
|
</docs>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import MalioCheckbox from '../components/malio/Checkbox.vue'
|
|
|
|
const simpleValue = ref(false)
|
|
</script>
|