diff --git a/CHANGELOG.md b/CHANGELOG.md index 63cae9d..50620d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-32] Création d'un composant saisie assistée (autocomplete) * [#MUI-34] Revoir le système de playground * [#MUI-33] Développer le composant Datepicker +* [#MUI-33] Création du composant DateTime (date + heure, sélecteur d'heure natif intérimaire) ### Changed * [#MUI-35] Refonte du composant drawer : slots `#header`/`#footer`, prop `side` (droite/gauche), `dismissable`, `closeOnEscape`, classes d'override, focus-trap, scroll-lock et fermeture au clavier. **Breaking** : la prop `title` est remplacée par le slot `#header`. diff --git a/COMPONENTS.md b/COMPONENTS.md index ab98a54..1ff4aa3 100644 --- a/COMPONENTS.md +++ b/COMPONENTS.md @@ -463,6 +463,43 @@ Sélecteur d'heure. --- +## MalioDateTime + +Champ unique combinant **date et heure** dans un popover (grille de calendrier + sélecteur d'heure sous la grille). + +> ⚠️ **Version intérimaire** : le sélecteur d'heure est un `` natif, en attendant la maquette d'un sélecteur d'heure dédié. Le bloc heure est isolé pour être remplacé sans impact sur le reste. + +La valeur est une chaîne **ISO naïve sans fuseau** au format `"YYYY-MM-DDTHH:MM:00"` (heure murale locale). Symfony (`DateTimeNormalizer`) parse ce format et applique son fuseau configuré côté back — pas de gestion de fuseau côté front. + +| Prop | Type | Défaut | Description | +|------|------|--------|-------------| +| `modelValue` | `string \| null` | `undefined` | Date + heure ISO naïve `"YYYY-MM-DDTHH:MM:00"` (v-model) | +| `id` | `string` | `''` | Id du champ | +| `name` | `string` | `''` | Attribut name | +| `label` | `string` | `''` | Label flottant | +| `placeholder` | `string` | `'JJ/MM/AAAA HH:MM'` | 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` | Borne min (datetime ou date ; borne la grille sur la partie date) | +| `max` | `string` | `undefined` | Borne max (idem) | +| `clearable` | `boolean` | `true` | Affiche la croix d'effacement | +| `inputClass` / `labelClass` / `groupClass` | `string` | `''` | Override des classes | + +**Events :** `update:modelValue(value: string | null)` + +Flux : cliquer un jour fixe la date (heure par défaut `00:00`), régler l'heure met à jour l'heure ; le popover se ferme au clic extérieur. La valeur est émise en direct à chaque interaction. + +```vue + + +``` + +--- + ## MalioButton Bouton d'action avec 4 variantes visuelles et icône optionnelle.