feat(amount) : affichage groupé temps réel (séparateurs de milliers)

app/components/malio/input/InputAmount.vue

@@ -9,10 +9,9 @@
         :autocomplete="autocomplete"
         :class="mergedInputClass"
         :required="required"
-        :maxlength="maxLength"
         :minlength="minLength"
         :disabled="disabled"
-        :value="currentValue"
+        :value="formattedValue"
         :readonly="readonly"
         :aria-invalid="!!error"
         :aria-describedby="describedBy"
@@ -66,6 +65,7 @@ import {computed, ref, useAttrs, useId} from 'vue'
 import { Icon as IconifyIcon } from '@iconify/vue'
 import {twMerge} from 'tailwind-merge'
 import MalioRequiredMark from '../shared/RequiredMark.vue'
+import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat'
 
 defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
 
@@ -126,6 +126,7 @@ const isFocused = ref(false)
 const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
 const isControlled = computed(() => props.modelValue !== undefined)
 const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const formattedValue = computed(() => formatGroupedAmount(currentValue.value))
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!props.success)
 const isFilled = computed(() => currentValue.value.trim().length > 0)
@@ -190,35 +191,31 @@ const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void
 }>()
 
-const normalizeAmount = (value: string) => {
-  const sanitizedValue = value
-    .replace(/\s+/g, '')
-    .replace(/,/g, '.')
-    .replace(/[^\d.]/g, '')
-  const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
-  const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
-  const decimalPart = decimalParts.join('').slice(0, 2)
-
-  if (sanitizedValue.includes('.')) {
-    return `${integerPart || '0'}.${decimalPart}`
-  }
-
-  return integerPart
-}
-
-// Keep the DOM input value, local state, and v-model emission in sync.
-const updateValue = (target: HTMLInputElement, value: string) => {
-  target.value = value
-  if (!isControlled.value) {
-    localValue.value = value
-  }
-  emit('update:modelValue', value)
-}
-
-// Normalize while typing so the field never keeps invalid amount characters.
+// À la frappe : parse vers le modèle propre (émis), reformate l'affichage groupé, repositionne le curseur.
 const onInput = (event: Event) => {
   const target = event.target as HTMLInputElement
-  updateValue(target, normalizeAmount(target.value))
+  const rawText = target.value
+  const caret = target.selectionStart ?? rawText.length
+  const model = normalizeAmount(rawText)
+
+  // maxLength borne la longueur du MODÈLE (pas l'affichage) : on ignore le keystroke en dépassement.
+  if (props.maxLength != null && model.length > Number(props.maxLength)) {
+    target.value = formattedValue.value
+    const restored = Math.max(0, caret - 1)
+    target.setSelectionRange(restored, restored)
+    return
+  }
+
+  const display = formatGroupedAmount(model)
+  const sig = countSignificant(rawText, caret)
+  target.value = display
+  const newCaret = caretFromSignificant(display, sig)
+  target.setSelectionRange(newCaret, newCaret)
+
+  if (!isControlled.value) {
+    localValue.value = model
+  }
+  emit('update:modelValue', model)
 }
 
 // Keep the blur handler only for focus-driven UI state.