55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<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>
|