feat : update modal style

2026-05-27 14:00:12 +02:00
parent 4d0c4d9a23
commit 3d0c881892
8 changed files with 115 additions and 48 deletions
@@ -31,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())

@@ -60,11 +60,12 @@ describe('MalioDateTime', () => {
  })

  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)
    })

@@ -28,10 +28,12 @@
        :max="max?.slice(0, 10)"
        @select="onSelectDay"
      />
-      <div class="mt-[26px]">
+      <div class="mt-4">
        <MalioTimePicker
          :model-value="timeValue || null"
+          label="Heure"
          :clearable="false"
+          static-popover
          @update:model-value="onTimeChange"
        />
      </div>
@@ -44,6 +46,7 @@ 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})
@@ -100,7 +103,10 @@ 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))
 }

@@ -1,9 +1,6 @@
 <template>
-  <div>
-    <div
-      ref="root"
-      :class="mergedGroupClass"
-    >
+  <div ref="root">
+    <div :class="mergedGroupClass">
      <input
        :id="inputId"
        :name="name"
@@ -52,11 +49,12 @@
        />
      </div>

+      <!-- Mode overlay (par défaut) : popover absolu au-dessus du contenu suivant. -->
      <div
-        v-if="isOpen"
+        v-if="isOpen && !staticPopover"
        data-test="popover"
        role="dialog"
-        class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white p-[10px] shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+        class="absolute left-0 right-0 top-full z-20 box-border w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
      >
        <TimeWheels
          :model-value="wheelsValue"
@@ -65,6 +63,20 @@
      </div>
    </div>

+    <!-- Mode statique : molette en flux (hors du groupe à hauteur fixe) → le
+         conteneur parent (ex. popover du DateTime) grandit pour l'englober. -->
+    <div
+      v-if="isOpen && staticPopover"
+      data-test="popover"
+      role="dialog"
+      class="relative mt-4 w-full bg-white shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+    >
+      <TimeWheels
+        :model-value="wheelsValue"
+        @update:model-value="onWheelChange"
+      />
+    </div>
+
    <p
      v-if="hint || hasError || hasSuccess"
      :id="`${inputId}-describedby`"
@@ -100,6 +112,7 @@ const props = withDefaults(
    error?: string
    success?: string
    clearable?: boolean
+    staticPopover?: boolean
    inputClass?: string
    labelClass?: string
    groupClass?: string
@@ -117,6 +130,7 @@ const props = withDefaults(
    error: '',
    success: '',
    clearable: true,
+    staticPopover: false,
    inputClass: '',
    labelClass: '',
    groupClass: '',
@@ -1,4 +1,4 @@
-import {describe, expect, it} from 'vitest'
+import {describe, expect, it, vi} from 'vitest'
 import {defineComponent, nextTick, ref} from 'vue'
 import {mount} from '@vue/test-utils'
 import {
@@ -90,4 +90,31 @@ describe('useInfiniteWheel — composable', () => {
    api().onKeydown(new KeyboardEvent('keydown', {key: 'ArrowUp'}))
    expect(changes.at(-1)).toBe(23)
  })
+
+  // Anti-boucle navigateur : un scroll programmatique déclenche une rafale d'évènements
+  // scroll (animation/snap). Ils ne doivent PAS être pris pour du scroll utilisateur,
+  // sinon settle() ré-émet en boucle et corrompt le patch DOM de Vue.
+  it('n\'émet pas en double quand un scroll programmatique déclenche une rafale de scroll', async () => {
+    vi.useFakeTimers()
+    try {
+      const changes: number[] = []
+      const {wrapper, api} = mountWheelHarness(9, (i) => changes.push(i))
+      await nextTick()
+      const el = wrapper.element as HTMLElement
+      changes.length = 0
+
+      api().scrollToIndex(12)
+
+      el.dispatchEvent(new Event('scroll'))
+      el.dispatchEvent(new Event('scroll'))
+      el.dispatchEvent(new Event('scroll'))
+
+      vi.advanceTimersByTime(300)
+
+      expect(changes).toEqual([12])
+    }
+    finally {
+      vi.useRealTimers()
+    }
+  })
 })
@@ -36,8 +36,25 @@ export function useInfiniteWheel(
  options: UseInfiniteWheelOptions,
 ) {
  const centeredIndex = ref(options.initialIndex())
-  let programmatic = false
  let scrollEndTimer: ReturnType<typeof setTimeout> | null = null
+  // Fenêtre de suppression : ignore les évènements scroll provoqués par NOS
+  // repositionnements programmatiques (et les réajustements de scroll-snap), qui
+  // arrivent en rafale. Un booléen one-shot n'en absorberait qu'un seul : les
+  // suivants seraient pris pour du scroll utilisateur → settle() → onChange en
+  // boucle (re-render ré-entrant qui corrompt le patch DOM dans le navigateur).
+  let suppressed = false
+  let suppressTimer: ReturnType<typeof setTimeout> | null = null
+
+  // Scroll programmatique INSTANTANÉ : pas de 'smooth', dont l'animation multi-frames
+  // émettrait justement la rafale d'évènements scroll problématique.
+  function applyScroll(top: number) {
+    const el = containerRef.value
+    if (!el) return
+    suppressed = true
+    if (suppressTimer) clearTimeout(suppressTimer)
+    suppressTimer = setTimeout(() => { suppressed = false }, 100)
+    el.scrollTop = top
+  }

  function readCentered() {
    const el = containerRef.value
@@ -48,38 +65,22 @@ export function useInfiniteWheel(
  function settle() {
    const el = containerRef.value
    if (!el) return
-    const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
-    if (corrected !== el.scrollTop) {
-      programmatic = true
-      el.scrollTop = corrected
-    }
    readCentered()
    options.onChange(centeredIndex.value)
+    const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
+    if (corrected !== el.scrollTop) applyScroll(corrected)
  }

  function onScroll() {
-    if (programmatic) {
-      programmatic = false
-      return
-    }
+    if (suppressed) return
    readCentered()
    if (scrollEndTimer) clearTimeout(scrollEndTimer)
    scrollEndTimer = setTimeout(settle, 120)
  }

-  function scrollToIndex(index: number, smooth = true) {
-    const el = containerRef.value
+  function scrollToIndex(index: number) {
    centeredIndex.value = index
-    if (el) {
-      programmatic = true
-      const top = scrollTopForValueIndex(index, options.itemHeight, options.length)
-      if (smooth && typeof el.scrollTo === 'function') {
-        el.scrollTo({top, behavior: 'smooth'})
-      }
-      else {
-        el.scrollTop = top
-      }
-    }
+    applyScroll(scrollTopForValueIndex(index, options.itemHeight, options.length))
    options.onChange(index)
  }

@@ -103,13 +104,13 @@ export function useInfiniteWheel(
    const el = containerRef.value
    if (!el) return
    el.addEventListener('scroll', onScroll, {passive: true})
-    programmatic = true
-    el.scrollTop = scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length)
+    applyScroll(scrollTopForValueIndex(options.initialIndex(), options.itemHeight, options.length))
  })

  onBeforeUnmount(() => {
    containerRef.value?.removeEventListener('scroll', onScroll)
    if (scrollEndTimer) clearTimeout(scrollEndTimer)
+    if (suppressTimer) clearTimeout(suppressTimer)
  })

  return {centeredIndex, scrollToIndex, step, onKeydown}
@@ -1,7 +1,7 @@
 <template>
  <div
    ref="container"
-    class="malio-wheel relative h-[200px] w-14 snap-y snap-mandatory overflow-y-scroll"
+    class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
    role="spinbutton"
    :tabindex="0"
    :aria-label="ariaLabel"
@@ -16,8 +16,8 @@
      :key="item.key"
      type="button"
      data-test="wheel-item"
-      class="flex h-10 w-full snap-center items-center justify-center text-lg outline-none transition-colors"
-      :class="item.value === centeredValue ? 'font-bold text-black' : 'text-m-muted'"
+      class="flex h-8 w-full snap-center items-center justify-center leading-none outline-none transition-all"
+      :class="itemClass(item.flat)"
      tabindex="-1"
      @click="onItemClick(item.value)"
    >
@@ -41,7 +41,7 @@ const props = defineProps<{

 const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()

-const ITEM_HEIGHT = 40
+const ITEM_HEIGHT = 32
 const container = ref<HTMLElement | null>(null)

 const pad = (value: number) => padSegment(value)
@@ -54,20 +54,29 @@ const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
  onChange: (index) => emit('update:modelValue', props.values[index]),
 })

-const centeredValue = computed(() => props.values[centeredIndex.value])
-
 const buffer = computed(() =>
  [0, 1, 2].flatMap((copy) =>
-    props.values.map((value) => ({value, key: copy * props.values.length + value})),
+    props.values.map((value, i) => {
+      const flat = copy * props.values.length + i
+      return {value, flat, key: flat}
+    }),
  ),
 )

+// Taille décroissante avec la distance au centre (effet molette iOS).
+const itemClass = (flat: number) => {
+  const distance = Math.abs(flat - (props.values.length + centeredIndex.value))
+  if (distance === 0) return 'text-[16px] font-medium text-black'
+  if (distance === 1) return 'text-[14px] text-m-muted'
+  return 'text-[12px] text-m-muted'
+}
+
 const onItemClick = (value: number) => scrollToIndex(indexOfValue(value))

 watch(
  () => props.modelValue,
  (value) => {
-    if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value), false)
+    if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value))
  },
 )
 </script>
@@ -75,6 +84,10 @@ watch(
 <style scoped>
 .malio-wheel {
  scrollbar-width: none;
+  /* Estompe les valeurs en haut et en bas (effet molette iOS) pour qu'elles ne
+     débordent pas visuellement du cadre. */
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
 }
 .malio-wheel::-webkit-scrollbar {
  display: none;
@@ -5,7 +5,7 @@
  >
    <!-- bande centrale (overlay, traverse les 2 colonnes) -->
    <div
-      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-10 -translate-y-1/2 rounded-lg bg-m-primary/10"
+      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
    />

    <MalioTimeWheel
@@ -16,7 +16,7 @@
      @update:model-value="onHours"
    />

-    <span class="relative z-10 text-lg font-bold text-black">:</span>
+    <span class="relative z-10 text-[14px] font-bold text-black">:</span>

    <MalioTimeWheel
      :model-value="minutes"