feat(input) : anneau de focus clavier sur InputAmount

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 16:22:16 +02:00
parent 2724476f1c
commit 74cb90fe1d
+6 -1
View File
@@ -20,7 +20,7 @@
inputmode="decimal" inputmode="decimal"
placeholder="_" placeholder="_"
@input="onInput" @input="onInput"
@focus="isFocused = true" @focus="isFocused = true; onKbdFocus()"
@blur="onBlur" @blur="onBlur"
> >
@@ -65,10 +65,13 @@ import {computed, ref, useAttrs, useId} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue' import { Icon as IconifyIcon } from '@iconify/vue'
import {twMerge} from 'tailwind-merge' import {twMerge} from 'tailwind-merge'
import MalioRequiredMark from '../shared/RequiredMark.vue' import MalioRequiredMark from '../shared/RequiredMark.vue'
import {useKbdFocusRing} from '../shared/useKbdFocusRing'
import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat' import {normalizeAmount, formatGroupedAmount, countSignificant, caretFromSignificant} from './composables/amountFormat'
defineOptions({name: 'MalioInputAmount', inheritAttrs: false}) defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
id?: string id?: string
@@ -146,6 +149,7 @@ const mergedGroupClass = computed(() =>
const mergedInputClass = computed(() => const mergedInputClass = computed(() =>
twMerge( 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', '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 ? '' : 'grow-height',
isReadonly.value isReadonly.value
? 'border-black' ? 'border-black'
@@ -221,6 +225,7 @@ const onInput = (event: Event) => {
// Keep the blur handler only for focus-driven UI state. // Keep the blur handler only for focus-driven UI state.
const onBlur = () => { const onBlur = () => {
isFocused.value = false isFocused.value = false
onKbdBlur()
} }
const iconInputPaddingClass = computed(() => { const iconInputPaddingClass = computed(() => {