feat(input) : anneau de focus clavier sur InputText et InputEmail

Anneau outline m-primary affiché uniquement à la navigation clavier (Tab),
pas au clic souris. Composable partagé useKbdFocusRing (détection de modalité
clavier/souris) + utilitaire CSS .m-focus-ring-kbd. Le visuel existant
(grossissement, label flottant, bordure bleue) reste inchangé.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 16:16:31 +02:00
parent 092b50afee
commit 4802f23b72
4 changed files with 78 additions and 4 deletions
+6 -2
View File
@@ -19,8 +19,8 @@
type="email"
inputmode="email"
@input="onInput"
@focus="isFocused = true"
@blur="isFocused = false"
@focus="isFocused = true; onKbdFocus()"
@blur="isFocused = false; onKbdBlur()"
>
<label
@@ -82,9 +82,12 @@ 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'
defineOptions({name: 'MalioInputEmail', inheritAttrs: false})
const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
const props = withDefaults(
defineProps<{
id?: string
@@ -164,6 +167,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'