fix : composant nombre et taux horaire

app/components/malio/Time.vue

@@ -31,9 +31,10 @@
           @blur="onHoursBlur"
         >
 
-        <span class="text-lg text-black">:</span>
+        <span class="text-[18px] text-black">:</span>
 
         <input
+          ref="minutesInputRef"
           :id="minutesInputId"
           :name="minutesName"
           autocomplete="off"
@@ -74,7 +75,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, useAttrs, useId, watch} from 'vue'
+import {computed, nextTick, ref, useAttrs, useId, watch} from 'vue'
 import {twMerge} from 'tailwind-merge'
 
 defineOptions({name: 'MalioTime', inheritAttrs: false})
@@ -117,6 +118,7 @@ const generatedId = useId()
 const hoursValue = ref('')
 const minutesValue = ref('')
 const activeField = ref<'hours' | 'minutes' | null>(null)
+const minutesInputRef = ref<HTMLInputElement | null>(null)
 
 const inputId = computed(() => props.id?.toString() || `malio-time-${generatedId}`)
 const hoursInputId = computed(() => `${inputId.value}-hours`)
@@ -138,13 +140,15 @@ const sanitizeDigits = (value: string) =>
 const normalizeHours = (value: string) => {
   const digits = sanitizeDigits(value)
   if (digits === '') return ''
-  return String(Math.min(Number.parseInt(digits, 10), 23))
+  if (Number.parseInt(digits, 10) > 23) return '23'
+  return digits
 }
 
 const normalizeMinutes = (value: string) => {
   const digits = sanitizeDigits(value)
   if (digits === '') return ''
-  return String(Math.min(Number.parseInt(digits, 10), 59))
+  if (Number.parseInt(digits, 10) > 59) return '59'
+  return digits
 }
 
 const parseTimeValue = (value: string | null | undefined) => {
@@ -159,6 +163,7 @@ const parseTimeValue = (value: string | null | undefined) => {
 }
 
 const syncFromModelValue = (value: string | null | undefined) => {
+  if (activeField.value) return
   const parsedValue = parseTimeValue(value)
   hoursValue.value = parsedValue.hours
   minutesValue.value = parsedValue.minutes
@@ -179,7 +184,7 @@ const mergedGroupClass = computed(() =>
 
 const mergedLabelClass = computed(() =>
   twMerge(
-    'radio-text mt-px mr-3 cursor-pointer text-black',
+    'mt-px mr-4 cursor-pointer text-black text-[18px]',
     hasError.value ? 'text-m-error' : '',
     hasSuccess.value ? 'text-m-success' : '',
     props.disabled ? 'cursor-not-allowed text-black/60' : '',
@@ -189,7 +194,7 @@ const mergedLabelClass = computed(() =>
 
 const mergedInputClass = (field: 'hours' | 'minutes') =>
   twMerge(
-    'h-7 w-9 border bg-white text-center text-lg outline-none rounded-md placeholder:text-m-muted',
+    'h-[30px] w-10 border bg-white text-center text-[18px] outline-none rounded-md placeholder:text-m-muted',
     props.disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
     hasError.value
       ? 'focus:border-2 border-m-error focus:border-m-error'
@@ -201,16 +206,16 @@ const mergedInputClass = (field: 'hours' | 'minutes') =>
     props.inputClass,
   )
 
-const emitCurrentValue = () => {
-  const formattedHours = hoursValue.value ? padSegment(hoursValue.value) : '00'
-  const formattedMinutes = minutesValue.value ? padSegment(minutesValue.value) : '00'
-
+const emitCurrentValue = (pad = false) => {
   if (!hoursValue.value && !minutesValue.value) {
     emit('update:modelValue', '')
     return
   }
 
-  emit('update:modelValue', `${formattedHours}:${formattedMinutes}`)
+  const h = pad ? padSegment(hoursValue.value || '0') : (hoursValue.value || '00')
+  const m = pad ? padSegment(minutesValue.value || '0') : (minutesValue.value || '00')
+
+  emit('update:modelValue', `${h}:${m}`)
 }
 
 const onHoursInput = (event: Event) => {
@@ -220,6 +225,10 @@ const onHoursInput = (event: Event) => {
   hoursValue.value = normalizedValue
   target.value = normalizedValue
   emitCurrentValue()
+
+  if (normalizedValue.length === 2) {
+    nextTick(() => minutesInputRef.value?.focus())
+  }
 }
 
 const onMinutesInput = (event: Event) => {
@@ -240,7 +249,7 @@ const formatFieldOnBlur = (field: 'hours' | 'minutes') => {
     minutesValue.value = padSegment(minutesValue.value)
   }
 
-  emitCurrentValue()
+  emitCurrentValue(true)
 }
 
 const onHoursBlur = () => {