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