feat(input) : anneau de focus clavier sur InputTextArea

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-09 16:38:32 +02:00
parent 74ee815d82
commit 88c2a00d89
+6 -2
View File
@@ -19,6 +19,7 @@
textInput, textInput,
showCounterComputed ? 'pb-6' : '', showCounterComputed ? 'pb-6' : '',
rounded, rounded,
keyboardFocused ? 'm-focus-ring-kbd' : '',
]" ]"
:required="required" :required="required"
:maxlength="maxLength" :maxlength="maxLength"
@@ -32,8 +33,8 @@
v-bind="attrs" v-bind="attrs"
placeholder="_" placeholder="_"
@input="onInput" @input="onInput"
@focus="isFocused = true" @focus="isFocused = true; onKbdFocus()"
@blur="isFocused = false" @blur="isFocused = false; onKbdBlur()"
/> />
<label <label
v-if="label" v-if="label"
@@ -89,9 +90,12 @@
import {computed, ref, useAttrs, useId} from 'vue' import {computed, ref, useAttrs, useId} from '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'
defineOptions({name: 'MalioInputTextArea', inheritAttrs: false}) defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
const {keyboardFocused, onFocus: onKbdFocus, onBlur: onKbdBlur} = useKbdFocusRing()
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
id?: string id?: string