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

src/components/base/CommonNumberInputBase.ts

@@ -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();
 

src/components/base/NumberInputBase.ts

@@ -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());
 

src/components/desktop/AmountInput.vue

@@ -1,7 +1,7 @@
 <template>
     <v-text-field type="text" class="text-field-with-colored-label" :class="extraClass"
                   :color="color" :base-color="color"
-                  :density="density" :variant="variant"
+                  :density="density" :variant="variant" :autofocus="autofocus"
                   :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
@@ -73,7 +73,11 @@ import SnackBar from '@/components/desktop/SnackBar.vue';
 import { ref, computed, useTemplateRef, 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 { NumeralSystem, DecimalSeparator } from '@/core/numeral.ts';
 import type { CurrencyPrependAndAppendText } from '@/core/currency.ts';
@@ -97,6 +101,7 @@ interface DesktopAmountInputProps extends CommonNumberInputProps {
     color?: string;
     density?: ComponentDensity;
     variant?: InputVariant;
+    autofocus?: boolean;
     currency: string;
     showCurrency?: boolean;
     persistentPlaceholder?: boolean;
@@ -107,10 +112,7 @@ interface DesktopAmountInputProps extends CommonNumberInputProps {
 }
 
 const props = defineProps<DesktopAmountInputProps>();
-
-const emit = defineEmits<{
-    (e: 'update:modelValue', value: number): void;
-}>();
+const emit = defineEmits<CommonNumberInputEmits>();
 
 const {
     tt,
@@ -125,7 +127,7 @@ const {
     currentValue,
     onKeyUpDown,
     onPaste
-} = useCommonNumberInputBase(props, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmountFromLocalizedNumerals, getFormattedValue, getValidFormattedValue);
+} = useCommonNumberInputBase(props, emit, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmountFromLocalizedNumerals, getFormattedValue, getValidFormattedValue);
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 

src/components/desktop/AmountInputDialog.vue

@@ -10,11 +10,13 @@
                     <v-row>
                         <v-col cols="12">
                             <amount-input :persistent-placeholder="true"
+                                          :autofocus="true"
                                           :currency="dialogOptions?.currency"
                                           :show-currency="!!dialogOptions?.currency"
                                           :label="inputLabelContent"
                                           :placeholder="inputPlaceholderContent"
-                                          v-model="amount" />
+                                          v-model="amount"
+                                          @enter="confirm" />
                         </v-col>
                     </v-row>
                 </v-form>

src/components/desktop/NumberInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text-field type="text" :class="extraClass" :density="density" :readonly="!!readonly" :disabled="!!disabled"
+    <v-text-field ref="textInput" type="text" :class="extraClass" :density="density" :readonly="!!readonly" :disabled="!!disabled"
                   :label="label" :placeholder="placeholder"
                   :persistent-placeholder="!!persistentPlaceholder"
                   v-model="currentValue"
@@ -8,7 +8,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { VTextField } from 'vuetify/components/VTextField';
+
+import { computed, useTemplateRef } from 'vue';
 
 import { type NumberInputProps, type NumberInputEmits, useNumberInputBase } from '@/components/base/NumberInputBase.ts';
 
@@ -29,7 +31,17 @@ const {
     onPaste
 } = useNumberInputBase(props, emit);
 
+const textInput = useTemplateRef<VTextField>('textInput');
+
 const extraClass = computed<string>(() => {
     return props.class || '';
 });
+
+function focus(): void {
+    textInput.value?.focus();
+}
+
+defineExpose({
+    focus
+});
 </script>