From 74cb90fe1d9fe16cb2ab5d0e4967b4207ce0138a Mon Sep 17 00:00:00 2001 From: tristan Date: Tue, 9 Jun 2026 16:22:16 +0200 Subject: [PATCH] feat(input) : anneau de focus clavier sur InputAmount Co-Authored-By: Claude Opus 4.8 (1M context) --- app/components/malio/input/InputAmount.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/app/components/malio/input/InputAmount.vue b/app/components/malio/input/InputAmount.vue index fd9bf9d..1b06327 100644 --- a/app/components/malio/input/InputAmount.vue +++ b/app/components/malio/input/InputAmount.vue @@ -20,7 +20,7 @@ inputmode="decimal" placeholder="_" @input="onInput" - @focus="isFocused = true" + @focus="isFocused = true; onKbdFocus()" @blur="onBlur" > @@ -65,10 +65,13 @@ 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 {useKbdFocusRing} from '../shared/useKbdFocusRing' import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat' defineOptions({name: 'MalioInputAmount', inheritAttrs: false}) +const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing() + const props = withDefaults( defineProps<{ id?: string @@ -146,6 +149,7 @@ const mergedGroupClass = computed(() => const mergedInputClass = computed(() => twMerge( 'floating-input peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent text-lg rounded-md', + keyboardFocused.value ? 'm-focus-ring-kbd' : '', isReadonly.value ? '' : 'grow-height', isReadonly.value ? 'border-black' @@ -221,6 +225,7 @@ const onInput = (event: Event) => { // Keep the blur handler only for focus-driven UI state. const onBlur = () => { isFocused.value = false + onKbdBlur() } const iconInputPaddingClass = computed(() => {