feat: Ajout des composants modal, accordeon, datetime avec selecteur d'heure à la molette (#56)

| 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: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #56
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/components/malio/date/DateTime.test.ts

@@ -2,6 +2,7 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 import {mount} from '@vue/test-utils'
 import type {DefineComponent} from 'vue'
 import DateTime_ from './DateTime.vue'
+import MalioTimePicker from '../time/TimePicker.vue'
 
 type DateTimeProps = {
   id?: string
@@ -30,7 +31,7 @@ const mountDateTime = (props: DateTimeProps = {}) =>
 describe('MalioDateTime', () => {
   beforeEach(() => {
     vi.useFakeTimers()
-    vi.setSystemTime(new Date(2026, 4, 19)) // 19 mai 2026
+    vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
   })
   afterEach(() => vi.useRealTimers())
 
@@ -49,28 +50,30 @@ describe('MalioDateTime', () => {
   })
 
   describe('popover', () => {
-    it('ouvre la grille et l\'input heure au clic', async () => {
+    it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
       const wrapper = mountDateTime()
       await wrapper.get('[data-test="date-input"]').trigger('click')
       expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
-      expect(wrapper.find('[data-test="time-input"]').exists()).toBe(true)
+      expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
+      expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
     })
   })
 
   describe('sélection', () => {
-    it('émet le jour à 00:00 et garde le popover ouvert', async () => {
+    it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
       const wrapper = mountDateTime()
       await wrapper.get('[data-test="date-input"]').trigger('click')
       await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
-      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T00:00:00'])
+      // heure système figée à 09:05
+      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
       expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
     })
 
     it('applique l\'heure réglée avant le clic du jour', async () => {
       const wrapper = mountDateTime()
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      await wrapper.get('[data-test="time-input"]').setValue('09:15')
-      // pas d'émission tant qu'aucun jour n'est choisi
+      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
+      await wrapper.vm.$nextTick()
       expect(wrapper.emitted('update:modelValue')).toBeUndefined()
       await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
       expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
@@ -79,15 +82,15 @@ describe('MalioDateTime', () => {
     it('met à jour l\'heure quand une date est déjà choisie', async () => {
       const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      await wrapper.get('[data-test="time-input"]').setValue('08:45')
+      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
+      await wrapper.vm.$nextTick()
       expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
     })
 
-    it('initialise l\'input heure depuis la valeur', async () => {
+    it('initialise le champ heure depuis la valeur', async () => {
       const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
       await wrapper.get('[data-test="date-input"]').trigger('click')
-      const time = wrapper.get('[data-test="time-input"]').element as HTMLInputElement
-      expect(time.value).toBe('14:30')
+      expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
     })
   })
 

app/components/malio/date/DateTime.vue

@@ -28,25 +28,25 @@
         :max="max?.slice(0, 10)"
         @select="onSelectDay"
       />
-      <!-- Bloc heure intérimaire : input natif, isolé pour remplacement futur par le sélecteur dédié. -->
-      <div class="mt-[26px] flex-col items-center gap-2">
-        <input
-          :id="timeInputId"
-          data-test="time-input"
-          type="time"
-          :value="timeValue"
-          class="w-full border border-m-muted bg-white px-2 py-1 text-base outline-none focus:border-m-primary"
-          @input="onTimeInput"
-        >
+      <div class="mt-4">
+        <MalioTimePicker
+          :model-value="timeValue || null"
+          label="Heure"
+          :clearable="false"
+          static-popover
+          @update:model-value="onTimeChange"
+        />
       </div>
     </template>
   </CalendarField>
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useId, watch} from 'vue'
+import {computed, ref, watch} from 'vue'
 import CalendarField from './internal/CalendarField.vue'
 import MonthGrid from './internal/MonthGrid.vue'
+import MalioTimePicker from '../time/TimePicker.vue'
+import {formatTime} from '../time/composables/timeFormat'
 import {composeDateTime, formatIsoDateTimeToDisplay, isValidIsoDateTime, splitDateTime} from './composables/datetimeFormat'
 
 defineOptions({name: 'MalioDateTime', inheritAttrs: false})
@@ -94,9 +94,6 @@ const props = withDefaults(
 
 const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
 
-const generatedId = useId()
-const timeInputId = computed(() => `${props.id || `malio-datetime-${generatedId}`}-time`)
-
 // pendingTime : heure réglée avant qu'un jour ne soit choisi (sinon on ne peut pas émettre).
 const pendingTime = ref('')
 
@@ -106,12 +103,14 @@ const displayValue = computed(() => formatIsoDateTimeToDisplay(props.modelValue
 const timeValue = computed(() => parts.value.time || pendingTime.value)
 
 function onSelectDay(iso: string) {
-  const time = parts.value.time || pendingTime.value || '00:00'
+  // Si aucune heure n'a été choisie, on prend l'heure actuelle (pas 00:00).
+  // (heure courante au moment du clic)
+  const now = new Date()
+  const time = parts.value.time || pendingTime.value || formatTime(now.getHours(), now.getMinutes())
   emit('update:modelValue', composeDateTime(iso, time))
 }
 
-function onTimeInput(e: Event) {
-  const value = (e.target as HTMLInputElement).value
+function onTimeChange(value: string | null) {
   if (!value) return
   if (datePart.value) {
     emit('update:modelValue', composeDateTime(datePart.value, value))