[#MUI-39] Création d'un sélecteur d'heure à molettes (MalioTimePicker) ; DateTime rebranché dessus (remplace l'input time natif intérimaire) (#55)
| 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é Reviewed-on: #55 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
This commit was merged in pull request #55.
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import type {DefineComponent} from 'vue'
|
||||
import TimePicker from './TimePicker.vue'
|
||||
|
||||
type TimePickerProps = {
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}
|
||||
|
||||
const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
|
||||
const mountPicker = (props: TimePickerProps = {}) =>
|
||||
mount(TimePickerForTest, {props, attachTo: document.body})
|
||||
|
||||
describe('MalioTimePicker', () => {
|
||||
it('affiche le label et l\'icône horloge', () => {
|
||||
const wrapper = mountPicker({label: 'Heure'})
|
||||
expect(wrapper.get('label').text()).toBe('Heure')
|
||||
expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('affiche la valeur HH:MM dans le champ', () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
|
||||
expect(input.value).toBe('14:30')
|
||||
})
|
||||
|
||||
it('ouvre le popover à molettes au clic', async () => {
|
||||
const wrapper = mountPicker()
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
|
||||
expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
|
||||
})
|
||||
|
||||
it('n\'ouvre pas le popover si disabled', async () => {
|
||||
const wrapper = mountPicker({disabled: true})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('émet la valeur réglée depuis les molettes', async () => {
|
||||
const wrapper = mountPicker({modelValue: '09:30'})
|
||||
await wrapper.get('[data-test="time-field"]').trigger('click')
|
||||
wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
|
||||
})
|
||||
|
||||
it('émet null au clic sur la croix', async () => {
|
||||
const wrapper = mountPicker({modelValue: '14:30'})
|
||||
await wrapper.get('[data-test="clear"]').trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
|
||||
})
|
||||
|
||||
it('positionne aria-invalid et describedby sur erreur', () => {
|
||||
const wrapper = mountPicker({error: 'Heure requise'})
|
||||
const input = wrapper.get('[data-test="time-field"]')
|
||||
expect(input.attributes('aria-invalid')).toBe('true')
|
||||
expect(input.attributes('aria-describedby')).toBeTruthy()
|
||||
expect(wrapper.text()).toContain('Heure requise')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div ref="root">
|
||||
<div :class="mergedGroupClass">
|
||||
<input
|
||||
:id="inputId"
|
||||
:name="name"
|
||||
data-test="time-field"
|
||||
readonly
|
||||
autocomplete="off"
|
||||
:class="mergedInputClass"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
:value="displayValue"
|
||||
:aria-invalid="!!error"
|
||||
:aria-describedby="describedBy"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="dialog"
|
||||
v-bind="attrs"
|
||||
placeholder="_"
|
||||
type="text"
|
||||
@click="onFieldClick"
|
||||
>
|
||||
|
||||
<label
|
||||
v-if="label"
|
||||
:for="inputId"
|
||||
:class="mergedLabelClass"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1">
|
||||
<button
|
||||
v-if="showClear"
|
||||
type="button"
|
||||
data-test="clear"
|
||||
class="text-m-muted hover:text-m-primary"
|
||||
aria-label="Effacer l'heure"
|
||||
@click.stop="onClear"
|
||||
>
|
||||
<Icon icon="mdi:close" :width="16" :height="16" />
|
||||
</button>
|
||||
<Icon
|
||||
data-test="clock-icon"
|
||||
icon="mdi:clock-outline"
|
||||
:width="24"
|
||||
:height="24"
|
||||
:class="iconStateClass"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mode overlay (par défaut) : popover absolu au-dessus du contenu suivant. -->
|
||||
<div
|
||||
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 shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
|
||||
>
|
||||
<TimeWheels
|
||||
:model-value="wheelsValue"
|
||||
@update:model-value="onWheelChange"
|
||||
/>
|
||||
</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`"
|
||||
:class="[
|
||||
hasError ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted',
|
||||
'mt-1 ml-[2px] text-xs',
|
||||
]"
|
||||
>
|
||||
{{ error || success || hint }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, onBeforeUnmount, onMounted, ref, useAttrs, useId} from 'vue'
|
||||
import {Icon} from '@iconify/vue'
|
||||
import {twMerge} from 'tailwind-merge'
|
||||
import TimeWheels from './internal/TimeWheels.vue'
|
||||
|
||||
defineOptions({name: 'MalioTimePicker', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
id?: string
|
||||
name?: string
|
||||
label?: string
|
||||
modelValue?: string | null
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
disabled?: boolean
|
||||
readonly?: boolean
|
||||
hint?: string
|
||||
error?: string
|
||||
success?: string
|
||||
clearable?: boolean
|
||||
staticPopover?: boolean
|
||||
inputClass?: string
|
||||
labelClass?: string
|
||||
groupClass?: string
|
||||
}>(),
|
||||
{
|
||||
id: '',
|
||||
name: '',
|
||||
label: '',
|
||||
modelValue: undefined,
|
||||
placeholder: 'HH:MM',
|
||||
required: false,
|
||||
disabled: false,
|
||||
readonly: false,
|
||||
hint: '',
|
||||
error: '',
|
||||
success: '',
|
||||
clearable: true,
|
||||
staticPopover: false,
|
||||
inputClass: '',
|
||||
labelClass: '',
|
||||
groupClass: '',
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string | null): void}>()
|
||||
|
||||
const attrs = useAttrs()
|
||||
const generatedId = useId()
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const isOpen = ref(false)
|
||||
const localValue = ref<string | null>(null)
|
||||
|
||||
const isControlled = computed(() => props.modelValue !== undefined)
|
||||
const currentValue = computed(() => (isControlled.value ? props.modelValue : localValue.value))
|
||||
|
||||
const inputId = computed(() => props.id?.toString() || `malio-time-picker-${generatedId}`)
|
||||
const hasError = computed(() => !!props.error)
|
||||
const hasSuccess = computed(() => !!props.success && !hasError.value)
|
||||
const displayValue = computed(() => currentValue.value ?? '')
|
||||
const isFilled = computed(() => displayValue.value.length > 0)
|
||||
const wheelsValue = computed(() => currentValue.value || '00:00')
|
||||
const showClear = computed(() =>
|
||||
props.clearable && isFilled.value && !props.disabled && !props.readonly,
|
||||
)
|
||||
const describedBy = computed(() =>
|
||||
(props.hint || hasError.value || hasSuccess.value) ? `${inputId.value}-describedby` : undefined,
|
||||
)
|
||||
|
||||
const commit = (value: string | null) => {
|
||||
if (!isControlled.value) localValue.value = value
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
|
||||
const onWheelChange = (value: string) => commit(value)
|
||||
|
||||
const onClear = () => {
|
||||
commit(null)
|
||||
}
|
||||
|
||||
const onFieldClick = () => {
|
||||
if (props.disabled || props.readonly) return
|
||||
isOpen.value = !isOpen.value
|
||||
}
|
||||
|
||||
const onMouseDown = (event: MouseEvent) => {
|
||||
if (!isOpen.value || !root.value) return
|
||||
if (!root.value.contains(event.target as Node)) isOpen.value = false
|
||||
}
|
||||
|
||||
onMounted(() => document.addEventListener('mousedown', onMouseDown))
|
||||
onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
|
||||
|
||||
const mergedGroupClass = computed(() =>
|
||||
twMerge('relative flex h-12 w-full items-center', props.groupClass),
|
||||
)
|
||||
|
||||
const mergedInputClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-input peer min-h-[40px] w-full cursor-pointer rounded-md border bg-white py-1 pl-3 pr-10 text-lg outline-none transition-[padding] duration-150 placeholder:text-transparent',
|
||||
isFilled.value ? 'border-black' : 'border-m-muted',
|
||||
props.disabled ? 'cursor-not-allowed border-m-muted text-black/60' : '',
|
||||
hasError.value
|
||||
? 'border-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'border-m-success'
|
||||
: 'focus:border-m-primary',
|
||||
isOpen.value ? 'border-m-primary !rounded-b-none !py-[9px]' : '',
|
||||
props.inputClass,
|
||||
),
|
||||
)
|
||||
|
||||
const mergedLabelClass = computed(() =>
|
||||
twMerge(
|
||||
'floating-label absolute left-3 top-2 mt-[5px] inline-block origin-left text-sm font-medium transition-transform duration-150',
|
||||
(isFilled.value || isOpen.value) ? '-translate-y-[1.25rem] scale-90' : '',
|
||||
hasError.value
|
||||
? 'text-m-danger'
|
||||
: hasSuccess.value
|
||||
? 'text-m-success'
|
||||
: isOpen.value
|
||||
? 'text-m-primary'
|
||||
: 'text-black peer-placeholder-shown:text-m-muted',
|
||||
props.labelClass,
|
||||
),
|
||||
)
|
||||
|
||||
const iconStateClass = computed(() => {
|
||||
if (hasError.value) return 'text-m-danger'
|
||||
if (hasSuccess.value) return 'text-m-success'
|
||||
if (isOpen.value) return 'text-m-primary'
|
||||
if (isFilled.value) return 'text-black'
|
||||
return 'text-m-muted'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.floating-label {
|
||||
background: white;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,31 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {clampHours, clampMinutes, formatTime, padSegment, parseTime} from './timeFormat'
|
||||
|
||||
describe('timeFormat', () => {
|
||||
it('parse une chaîne HH:MM valide', () => {
|
||||
expect(parseTime('09:05')).toEqual({hours: 9, minutes: 5})
|
||||
})
|
||||
|
||||
it('renvoie null pour vide ou invalide', () => {
|
||||
expect(parseTime('')).toBeNull()
|
||||
expect(parseTime(null)).toBeNull()
|
||||
expect(parseTime('abc')).toBeNull()
|
||||
expect(parseTime('12')).toBeNull()
|
||||
})
|
||||
|
||||
it('clamp les valeurs hors bornes au parsing', () => {
|
||||
expect(parseTime('99:88')).toEqual({hours: 23, minutes: 59})
|
||||
})
|
||||
|
||||
it('formate avec zéro-padding', () => {
|
||||
expect(formatTime(9, 5)).toBe('09:05')
|
||||
expect(formatTime(0, 0)).toBe('00:00')
|
||||
})
|
||||
|
||||
it('clamp et pad les helpers', () => {
|
||||
expect(clampHours(30)).toBe(23)
|
||||
expect(clampHours(-2)).toBe(0)
|
||||
expect(clampMinutes(75)).toBe(59)
|
||||
expect(padSegment(7)).toBe('07')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,32 @@
|
||||
export interface TimeParts {
|
||||
hours: number
|
||||
minutes: number
|
||||
}
|
||||
|
||||
export function clampHours(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(23, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function clampMinutes(value: number): number {
|
||||
if (Number.isNaN(value)) return 0
|
||||
return Math.min(59, Math.max(0, Math.trunc(value)))
|
||||
}
|
||||
|
||||
export function padSegment(value: number): string {
|
||||
return value.toString().padStart(2, '0')
|
||||
}
|
||||
|
||||
export function parseTime(value: string | null | undefined): TimeParts | null {
|
||||
if (!value) return null
|
||||
const match = /^(\d{1,2}):(\d{1,2})$/.exec(value.trim())
|
||||
if (!match) return null
|
||||
return {
|
||||
hours: clampHours(Number.parseInt(match[1], 10)),
|
||||
minutes: clampMinutes(Number.parseInt(match[2], 10)),
|
||||
}
|
||||
}
|
||||
|
||||
export function formatTime(hours: number, minutes: number): string {
|
||||
return `${padSegment(clampHours(hours))}:${padSegment(clampMinutes(minutes))}`
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
import {describe, expect, it, vi} from 'vitest'
|
||||
import {defineComponent, nextTick, ref} from 'vue'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import {
|
||||
CENTER_OFFSET,
|
||||
VISIBLE_ROWS,
|
||||
loopCorrection,
|
||||
scrollTopForValueIndex,
|
||||
useInfiniteWheel,
|
||||
valueIndexFromScroll,
|
||||
} from './useInfiniteWheel'
|
||||
|
||||
const H = 40 // itemHeight
|
||||
const LEN = 24 // ex. heures
|
||||
|
||||
describe('useInfiniteWheel — math pure', () => {
|
||||
it('expose 5 lignes visibles et un offset central de 2', () => {
|
||||
expect(VISIBLE_ROWS).toBe(5)
|
||||
expect(CENTER_OFFSET).toBe(2)
|
||||
})
|
||||
|
||||
it('scrollTopForValueIndex et valueIndexFromScroll font un aller-retour', () => {
|
||||
for (const index of [0, 1, 9, 23]) {
|
||||
const top = scrollTopForValueIndex(index, H, LEN)
|
||||
expect(valueIndexFromScroll(top, H, LEN)).toBe(index)
|
||||
}
|
||||
})
|
||||
|
||||
it('valueIndexFromScroll boucle en modulo', () => {
|
||||
const top = scrollTopForValueIndex(0, H, LEN)
|
||||
expect(valueIndexFromScroll(top + LEN * H, H, LEN)).toBe(0)
|
||||
})
|
||||
|
||||
it('loopCorrection laisse le scroll de la copie du milieu inchangé', () => {
|
||||
const top = scrollTopForValueIndex(12, H, LEN)
|
||||
expect(loopCorrection(top, H, LEN)).toBe(top)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le haut', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) - LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted + LEN * H)
|
||||
})
|
||||
|
||||
it('loopCorrection ramène vers le milieu quand on dérive vers le bas', () => {
|
||||
const drifted = scrollTopForValueIndex(0, H, LEN) + LEN * H
|
||||
expect(loopCorrection(drifted, H, LEN)).toBe(drifted - LEN * H)
|
||||
})
|
||||
})
|
||||
|
||||
function mountWheelHarness(initialIndex: number, onChange: (i: number) => void) {
|
||||
let api!: ReturnType<typeof useInfiniteWheel>
|
||||
const Harness = defineComponent({
|
||||
setup() {
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
api = useInfiniteWheel(container, {
|
||||
length: 24,
|
||||
itemHeight: 40,
|
||||
initialIndex: () => initialIndex,
|
||||
onChange,
|
||||
})
|
||||
return {container}
|
||||
},
|
||||
template: '<div ref="container" style="height:200px;overflow:auto"><div style="height:2880px" /></div>',
|
||||
})
|
||||
const wrapper = mount(Harness, {attachTo: document.body})
|
||||
return {wrapper, api: () => api}
|
||||
}
|
||||
|
||||
describe('useInfiniteWheel — composable', () => {
|
||||
it('step(+1) émet l\'index suivant', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(9, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(10)
|
||||
})
|
||||
|
||||
it('step boucle de 23 à 0', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(23, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
api().step(1)
|
||||
expect(changes.at(-1)).toBe(0)
|
||||
})
|
||||
|
||||
it('onKeydown ArrowUp décrémente (avec wrap)', async () => {
|
||||
const changes: number[] = []
|
||||
const {api} = mountWheelHarness(0, (i) => changes.push(i))
|
||||
await nextTick()
|
||||
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()
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,117 @@
|
||||
import {onBeforeUnmount, onMounted, ref, type Ref} from 'vue'
|
||||
|
||||
export const VISIBLE_ROWS = 5
|
||||
export const CENTER_OFFSET = (VISIBLE_ROWS - 1) / 2 // 2
|
||||
|
||||
/** Index de valeur logique (0..length-1) centré pour un scrollTop donné. */
|
||||
export function valueIndexFromScroll(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const flat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
return ((flat % length) + length) % length
|
||||
}
|
||||
|
||||
/** scrollTop qui centre l'index donné dans la copie du milieu (buffer à 3 copies). */
|
||||
export function scrollTopForValueIndex(valueIndex: number, itemHeight: number, length: number): number {
|
||||
const flat = length + valueIndex - CENTER_OFFSET
|
||||
return flat * itemHeight
|
||||
}
|
||||
|
||||
/** Recentre le scrollTop dans la copie du milieu [length, 2*length) si on a dérivé. */
|
||||
export function loopCorrection(scrollTop: number, itemHeight: number, length: number): number {
|
||||
const block = length * itemHeight
|
||||
const centeredFlat = Math.round(scrollTop / itemHeight) + CENTER_OFFSET
|
||||
if (centeredFlat < length) return scrollTop + block
|
||||
if (centeredFlat >= 2 * length) return scrollTop - block
|
||||
return scrollTop
|
||||
}
|
||||
|
||||
export interface UseInfiniteWheelOptions {
|
||||
length: number
|
||||
itemHeight: number
|
||||
initialIndex: () => number
|
||||
onChange: (index: number) => void
|
||||
}
|
||||
|
||||
export function useInfiniteWheel(
|
||||
containerRef: Ref<HTMLElement | null>,
|
||||
options: UseInfiniteWheelOptions,
|
||||
) {
|
||||
const centeredIndex = ref(options.initialIndex())
|
||||
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
|
||||
if (!el) return
|
||||
centeredIndex.value = valueIndexFromScroll(el.scrollTop, options.itemHeight, options.length)
|
||||
}
|
||||
|
||||
function settle() {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
readCentered()
|
||||
options.onChange(centeredIndex.value)
|
||||
const corrected = loopCorrection(el.scrollTop, options.itemHeight, options.length)
|
||||
if (corrected !== el.scrollTop) applyScroll(corrected)
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
if (suppressed) return
|
||||
readCentered()
|
||||
if (scrollEndTimer) clearTimeout(scrollEndTimer)
|
||||
scrollEndTimer = setTimeout(settle, 120)
|
||||
}
|
||||
|
||||
function scrollToIndex(index: number) {
|
||||
centeredIndex.value = index
|
||||
applyScroll(scrollTopForValueIndex(index, options.itemHeight, options.length))
|
||||
options.onChange(index)
|
||||
}
|
||||
|
||||
function step(delta: number) {
|
||||
const next = (((centeredIndex.value + delta) % options.length) + options.length) % options.length
|
||||
scrollToIndex(next)
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault()
|
||||
step(-1)
|
||||
}
|
||||
else if (event.key === 'ArrowDown') {
|
||||
event.preventDefault()
|
||||
step(1)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const el = containerRef.value
|
||||
if (!el) return
|
||||
el.addEventListener('scroll', onScroll, {passive: true})
|
||||
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}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
|
||||
const mountWheel = (modelValue = 9) =>
|
||||
mount(TimeWheel, {
|
||||
props: {modelValue, values: HOURS, ariaLabel: 'Heures'},
|
||||
attachTo: document.body,
|
||||
})
|
||||
|
||||
describe('MalioTimeWheel', () => {
|
||||
it('expose le rôle spinbutton et les attributs aria', () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const el = wrapper.get('[role="spinbutton"]')
|
||||
expect(el.attributes('aria-label')).toBe('Heures')
|
||||
expect(el.attributes('aria-valuenow')).toBe('9')
|
||||
expect(el.attributes('aria-valuemin')).toBe('0')
|
||||
expect(el.attributes('aria-valuemax')).toBe('23')
|
||||
expect(el.attributes('aria-valuetext')).toBe('09')
|
||||
})
|
||||
|
||||
it('rend 3 copies des valeurs (buffer infini)', () => {
|
||||
const wrapper = mountWheel()
|
||||
expect(wrapper.findAll('[data-test="wheel-item"]')).toHaveLength(24 * 3)
|
||||
})
|
||||
|
||||
it('émet la nouvelle valeur au clavier ArrowDown', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
await wrapper.get('[role="spinbutton"]').trigger('keydown', {key: 'ArrowDown'})
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([10])
|
||||
})
|
||||
|
||||
it('émet la valeur cliquée', async () => {
|
||||
const wrapper = mountWheel(9)
|
||||
const item = wrapper.findAll('[data-test="wheel-item"]').find((w) => w.text() === '11')!
|
||||
await item.trigger('click')
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([11])
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
|
||||
role="spinbutton"
|
||||
:tabindex="0"
|
||||
:aria-label="ariaLabel"
|
||||
:aria-valuenow="modelValue"
|
||||
:aria-valuemin="values[0]"
|
||||
:aria-valuemax="values[values.length - 1]"
|
||||
:aria-valuetext="pad(modelValue)"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<button
|
||||
v-for="item in buffer"
|
||||
:key="item.key"
|
||||
type="button"
|
||||
data-test="wheel-item"
|
||||
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)"
|
||||
>
|
||||
{{ pad(item.value) }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {useInfiniteWheel} from '../composables/useInfiniteWheel'
|
||||
import {padSegment} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheel', inheritAttrs: false})
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: number
|
||||
values: number[]
|
||||
ariaLabel: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()
|
||||
|
||||
const ITEM_HEIGHT = 32
|
||||
const container = ref<HTMLElement | null>(null)
|
||||
|
||||
const pad = (value: number) => padSegment(value)
|
||||
const indexOfValue = (value: number) => Math.max(0, props.values.indexOf(value))
|
||||
|
||||
const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
|
||||
length: props.values.length,
|
||||
itemHeight: ITEM_HEIGHT,
|
||||
initialIndex: () => indexOfValue(props.modelValue),
|
||||
onChange: (index) => emit('update:modelValue', props.values[index]),
|
||||
})
|
||||
|
||||
const buffer = computed(() =>
|
||||
[0, 1, 2].flatMap((copy) =>
|
||||
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))
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<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;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,48 @@
|
||||
import {describe, expect, it} from 'vitest'
|
||||
import {mount} from '@vue/test-utils'
|
||||
import TimeWheels from './TimeWheels.vue'
|
||||
import TimeWheel from './TimeWheel.vue'
|
||||
|
||||
const mountWheels = (modelValue = '09:30') =>
|
||||
mount(TimeWheels, {props: {modelValue}, attachTo: document.body})
|
||||
|
||||
describe('MalioTimeWheels', () => {
|
||||
it('rend deux molettes (heures + minutes) et un séparateur', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels).toHaveLength(2)
|
||||
expect(wheels[0].props('ariaLabel')).toBe('Heures')
|
||||
expect(wheels[1].props('ariaLabel')).toBe('Minutes')
|
||||
expect(wrapper.text()).toContain(':')
|
||||
})
|
||||
|
||||
it('splitte modelValue vers les bonnes molettes', () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(9)
|
||||
expect(wheels[1].props('modelValue')).toBe(30)
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand l\'heure change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[0].vm.$emit('update:modelValue', 14)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['14:30'])
|
||||
})
|
||||
|
||||
it('recompose et émet HH:MM quand la minute change', async () => {
|
||||
const wrapper = mountWheels('09:30')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
wheels[1].vm.$emit('update:modelValue', 5)
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['09:05'])
|
||||
})
|
||||
|
||||
it('par défaut 00:00 quand modelValue est vide', () => {
|
||||
const wrapper = mountWheels('')
|
||||
const wheels = wrapper.findAllComponents(TimeWheel)
|
||||
expect(wheels[0].props('modelValue')).toBe(0)
|
||||
expect(wheels[1].props('modelValue')).toBe(0)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div
|
||||
data-test="time-wheels"
|
||||
class="relative flex items-center justify-center gap-3 py-2"
|
||||
>
|
||||
<!-- bande centrale (overlay, traverse les 2 colonnes) -->
|
||||
<div
|
||||
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
|
||||
:model-value="hours"
|
||||
:values="HOURS"
|
||||
aria-label="Heures"
|
||||
class="relative z-10"
|
||||
@update:model-value="onHours"
|
||||
/>
|
||||
|
||||
<span class="relative z-10 text-[14px] font-bold text-black">:</span>
|
||||
|
||||
<MalioTimeWheel
|
||||
:model-value="minutes"
|
||||
:values="MINUTES"
|
||||
aria-label="Minutes"
|
||||
class="relative z-10"
|
||||
@update:model-value="onMinutes"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {computed} from 'vue'
|
||||
import MalioTimeWheel from './TimeWheel.vue'
|
||||
import {formatTime, parseTime} from '../composables/timeFormat'
|
||||
|
||||
defineOptions({name: 'MalioTimeWheels', inheritAttrs: false})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{modelValue?: string | null}>(),
|
||||
{modelValue: ''},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()
|
||||
|
||||
const HOURS = Array.from({length: 24}, (_, i) => i)
|
||||
const MINUTES = Array.from({length: 60}, (_, i) => i)
|
||||
|
||||
const parts = computed(() => parseTime(props.modelValue) ?? {hours: 0, minutes: 0})
|
||||
const hours = computed(() => parts.value.hours)
|
||||
const minutes = computed(() => parts.value.minutes)
|
||||
|
||||
const onHours = (value: number) => emit('update:modelValue', formatTime(value, minutes.value))
|
||||
const onMinutes = (value: number) => emit('update:modelValue', formatTime(hours.value, value))
|
||||
</script>
|
||||
Reference in New Issue
Block a user