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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user