automatically focus after opening the dialog and support confirming with the enter key

This commit is contained in:
MaysWind
2026-01-11 13:24:26 +08:00
parent ee9b281919
commit ca959fb9ce
7 changed files with 66 additions and 22 deletions
+12 -1
View File
@@ -15,11 +15,16 @@ export interface CommonNumberInputProps {
modelValue: number;
}
export interface CommonNumberInputEmits {
(e: 'update:modelValue', value: number): void;
(e: 'enter'): void;
}
export type ParseNumberFunction = (value: string) => number;
export type FormatNumberFunction = (value: number) => string;
export type GetValidFormattedValueFunction = (value: number, textualValue: string, hasDecimalSeparator: boolean) => string;
export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecimalCount: number, initValue: string, parseNumber: ParseNumberFunction, formatNumber: FormatNumberFunction, getValidFormattedValue: GetValidFormattedValueFunction) {
export function useCommonNumberInputBase(props: CommonNumberInputProps, emit: CommonNumberInputEmits, maxDecimalCount: number, initValue: string, parseNumber: ParseNumberFunction, formatNumber: FormatNumberFunction, getValidFormattedValue: GetValidFormattedValueFunction) {
const {
getCurrentNumeralSystemType,
getCurrentDecimalSeparator,
@@ -43,6 +48,12 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim
return;
}
if (e.key === 'Enter') {
emit('enter');
e.preventDefault();
return;
}
const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
const decimalSeparator = getCurrentDecimalSeparator();
+8 -6
View File
@@ -1,7 +1,11 @@
import { computed, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonNumberInputProps, useCommonNumberInputBase } from '@/components/base/CommonNumberInputBase.ts';
import {
type CommonNumberInputProps,
type CommonNumberInputEmits,
useCommonNumberInputBase
} from '@/components/base/CommonNumberInputBase.ts';
import { isDefined, isNumber, replaceAll, removeAll } from '@/lib/common.ts';
import { NumeralSystem } from '@/core/numeral.ts';
@@ -12,11 +16,9 @@ export interface NumberInputProps extends CommonNumberInputProps {
maxDecimalCount?: number;
}
export interface NumberInputEmits {
(e: 'update:modelValue', value: number): void;
}
export type NumberInputEmits = CommonNumberInputEmits;
export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmits) {
export function useNumberInputBase(props: NumberInputProps, emit: CommonNumberInputEmits) {
const {
getCurrentNumeralSystemType,
getCurrentDecimalSeparator,
@@ -27,7 +29,7 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi
currentValue,
onKeyUpDown,
onPaste
} = useCommonNumberInputBase(props, props.maxDecimalCount ?? -1, getFormattedValue(props.modelValue), parseNumber, getFormattedValue, getValidFormattedValue);
} = useCommonNumberInputBase(props, emit, props.maxDecimalCount ?? -1, getFormattedValue(props.modelValue), parseNumber, getFormattedValue, getValidFormattedValue);
const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());