diff --git a/COMPONENTS.md b/COMPONENTS.md index 1ff4aa3..5a03fbb 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -442,6 +442,106 @@ Bouton radio (à utiliser en groupe avec le même `name`). --- +## MalioDate + +Sélecteur de date unique avec popover (grille de calendrier + vue mois/année). + +La valeur est une chaîne ISO `"YYYY-MM-DD"`. Cliquer un jour émet la date et ferme le popover. + +| Prop | Type | Défaut | Description | +|------|------|--------|-------------| +| `modelValue` | `string \| null` | `undefined` | Date ISO `"YYYY-MM-DD"` (v-model) | +| `id` | `string` | `''` | Id du champ | +| `name` | `string` | `''` | Attribut name | +| `label` | `string` | `''` | Label flottant | +| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | +| `required` | `boolean` | `false` | Requis | +| `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Lecture seule | +| `hint` | `string` | `''` | Texte d'aide | +| `error` | `string` | `''` | Message d'erreur | +| `success` | `string` | `''` | Message de succès | +| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` (jours antérieurs désactivés) | +| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` (jours postérieurs désactivés) | +| `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | + +**Events :** `update:modelValue(value: string | null)` + +```vue + + + +``` + +--- + +## MalioDateRange + +Sélecteur de **plage de dates** (date de début → date de fin) dans un seul champ. Cliquer un premier jour démarre la plage, le second la termine ; un survol prévisualise la plage. + +La valeur est un objet `{ start: string; end: string }` (dates ISO `"YYYY-MM-DD"`), ou `null`. + +| Prop | Type | Défaut | Description | +|------|------|--------|-------------| +| `modelValue` | `{ start: string; end: string } \| null` | `undefined` | Plage de dates ISO (v-model) | +| `id` | `string` | `''` | Id du champ | +| `name` | `string` | `''` | Attribut name | +| `label` | `string` | `''` | Label flottant | +| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | +| `required` | `boolean` | `false` | Requis | +| `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Lecture seule | +| `hint` | `string` | `''` | Texte d'aide | +| `error` | `string` | `''` | Message d'erreur | +| `success` | `string` | `''` | Message de succès | +| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` | +| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` | +| `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | + +**Events :** `update:modelValue(value: { start: string; end: string } | null)` + +```vue + + +``` + +--- + +## MalioDateWeek + +Sélecteur de **semaine ISO** : cliquer un jour (ou un numéro de semaine) sélectionne la semaine entière. + +La valeur est une chaîne au format **semaine ISO native** `"YYYY-Www"` (ex. `"2026-W21"`), ou `null`. Le champ affiche `Semaine W (JJ/MM → JJ/MM/AAAA)`. + +| Prop | Type | Défaut | Description | +|------|------|--------|-------------| +| `modelValue` | `string \| null` | `undefined` | Semaine ISO `"YYYY-Www"` (v-model) | +| `id` | `string` | `''` | Id du champ | +| `name` | `string` | `''` | Attribut name | +| `label` | `string` | `''` | Label flottant | +| `placeholder` | `string` | `'JJ/MM/AAAA'` | Placeholder | +| `required` | `boolean` | `false` | Requis | +| `disabled` | `boolean` | `false` | Désactivé | +| `readonly` | `boolean` | `false` | Lecture seule | +| `hint` | `string` | `''` | Texte d'aide | +| `error` | `string` | `''` | Message d'erreur | +| `success` | `string` | `''` | Message de succès | +| `min` | `string` | `undefined` | Date min `"YYYY-MM-DD"` | +| `max` | `string` | `undefined` | Date max `"YYYY-MM-DD"` | +| `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | + +**Events :** `update:modelValue(value: string | null)` + +```vue + + +``` + +--- + ## MalioTime Sélecteur d'heure.