zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use custom number input box to replace the system input box

Browse Source
This commit is contained in:
MaysWind
2025-06-02 02:05:18 +08:00
parent baa6850fcb
commit 6222b6edae
8 changed files with 230 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/NumberInputBase.ts
+123
View File
@@ -0,0 +1,123 @@
import { watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { type CommonNumberInputProps, useCommonNumberInputBase } from '@/components/base/CommonNumberInputBase.ts';
import { isNumber, replaceAll, removeAll } from '@/lib/common.ts';
export interface NumberInputProps extends CommonNumberInputProps {
minValue?: number;
maxValue?: number;
maxDecimalCount?: number;
}
export interface NumberInputEmits {
(e: 'update:modelValue', value: number): void;
}
export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmits) {
const {
getCurrentDecimalSeparator,
getCurrentDigitGroupingSymbol
} = useI18n();
const {
currentValue,
onKeyUpDown,
onPaste
} = useCommonNumberInputBase(props, props.maxDecimalCount ?? -1, getFormattedValue(props.modelValue), parseNumber, getFormattedValue, getValidFormattedValue);
function parseNumber(value: string): number {
if (!value) {
return 0;
}
const decimalSeparator = getCurrentDecimalSeparator();
let finalValue = '';
for (let i = 0; i < value.length; i++) {
if (!('0' <= value[i] && value[i] <= '9') && value[i] !== '-' && value[i] !== decimalSeparator) {
break;
}
finalValue += value[i];
}
if (decimalSeparator !== '.') {
finalValue = replaceAll(finalValue, decimalSeparator, '.');
}
return parseFloat(finalValue);
}
function getValidFormattedValue(value: number, textualValue: string): string {
if (isNumber(props.minValue) && value < props.minValue) {
return getFormattedValue(props.minValue);
}
if (isNumber(props.maxValue) && value > props.maxValue) {
return getFormattedValue(props.maxValue);
}
const decimalSeparator = getCurrentDecimalSeparator();
const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
return replaceAll(removeAll(textualValue, digitGroupingSymbol), '.', decimalSeparator);
}
function getFormattedValue(value: number): string {
if (!Number.isNaN(value) && Number.isFinite(value)) {
const decimalSeparator = getCurrentDecimalSeparator();
if (isNumber(props.maxDecimalCount) && props.maxDecimalCount >= 0) {
return replaceAll(value.toFixed(props.maxDecimalCount), '.', decimalSeparator);
} else {
return replaceAll(value.toString(), '.', decimalSeparator);
}
}
return '0';
}
watch(() => props.modelValue, (newValue) => {
const numericCurrentValue = parseNumber(currentValue.value);
if (newValue !== numericCurrentValue) {
const newStringValue = getFormattedValue(newValue);
if (!(newStringValue === '0' && currentValue.value === '')) {
currentValue.value = newStringValue;
}
}
});
watch(currentValue, (newValue) => {
let finalValue = '';
if (newValue) {
const decimalSeparator = getCurrentDecimalSeparator();
for (let i = 0; i < newValue.length; i++) {
if (!('0' <= newValue[i] && newValue[i] <= '9') && newValue[i] !== '-' && newValue[i] !== decimalSeparator) {
break;
}
finalValue += newValue[i];
}
}
if (finalValue !== newValue) {
currentValue.value = finalValue;
} else {
const value: number = parseNumber(finalValue);
emit('update:modelValue', value);
}
});
return {
// states
currentValue,
// functions
onKeyUpDown,
onPaste
}
}
src/components/desktop/NumberInput.vue
+35
View File
@@ -0,0 +1,35 @@
<template>
<v-text-field type="text" :class="extraClass" :density="density" :readonly="!!readonly" :disabled="!!disabled"
:label="label" :placeholder="placeholder"
:persistent-placeholder="!!persistentPlaceholder"
v-model="currentValue"
@keydown="onKeyUpDown" @keyup="onKeyUpDown" @paste="onPaste">
</v-text-field>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { type NumberInputProps, type NumberInputEmits, useNumberInputBase } from '@/components/base/NumberInputBase.ts';
import type { ComponentDensity } from '@/lib/ui/desktop.ts';
interface DesktopNumberInputProps extends NumberInputProps {
class?: string;
density?: ComponentDensity;
persistentPlaceholder?: boolean;
}
const props = defineProps<DesktopNumberInputProps>();
const emit = defineEmits<NumberInputEmits>();
const {
currentValue,
onKeyUpDown,
onPaste
} = useNumberInputBase(props, emit);
const extraClass = computed<string>(() => {
return props.class || '';
});
</script>
src/components/mobile/ListNumberInput.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<f7-list-input
type="text"
:readonly="!!readonly"
:disabled="!!disabled"
:label="label"
:placeholder="placeholder"
v-model:value="currentValue"
@keydown="onKeyUpDown"
@keyup="onKeyUpDown"
@paste="onPaste"
></f7-list-input>
</template>
<script setup lang="ts">
import { type NumberInputProps, type NumberInputEmits, useNumberInputBase } from '@/components/base/NumberInputBase.ts';
const props = defineProps<NumberInputProps>();
const emit = defineEmits<NumberInputEmits>();
const {
currentValue,
onKeyUpDown,
onPaste
} = useNumberInputBase(props, emit);
</script>
src/consts/exchange_rate.ts
+2
View File
@@ -0,0 +1,2 @@
export const USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE: number = 0;
export const USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE: number = 999999999.9999;
src/desktop-main.ts
+2
View File
@@ -77,6 +77,7 @@ import MapView from '@/components/common/MapView.vue';
import ItemIcon from '@/components/desktop/ItemIcon.vue';
import BtnVerticalGroup from '@/components/desktop/BtnVerticalGroup.vue';
import NumberInput from '@/components/desktop/NumberInput.vue';
import AmountInput from '@/components/desktop/AmountInput.vue';
import LanguageSelect from '@/components/desktop/LanguageSelect.vue';
import LanguageSelectButton from '@/components/desktop/LanguageSelectButton.vue';
@@ -453,6 +454,7 @@ app.component('MapView', MapView);
app.component('ItemIcon', ItemIcon);
app.component('BtnVerticalGroup', BtnVerticalGroup);
app.component('NumberInput', NumberInput);
app.component('AmountInput', AmountInput);
app.component('LanguageSelect', LanguageSelect);
app.component('LanguageSelectButton', LanguageSelectButton);
src/mobile-main.ts
+2
View File
@@ -95,6 +95,7 @@ import DateSelectionSheet from '@/components/mobile/DateSelectionSheet.vue';
import DateRangeSelectionSheet from '@/components/mobile/DateRangeSelectionSheet.vue';
import MonthSelectionSheet from '@/components/mobile/MonthSelectionSheet.vue';
import MonthRangeSelectionSheet from '@/components/mobile/MonthRangeSelectionSheet.vue';
import ListNumberInput from '@/components/mobile/ListNumberInput.vue';
import ListItemSelectionSheet from '@/components/mobile/ListItemSelectionSheet.vue';
import ListItemSelectionPopup from '@/components/mobile/ListItemSelectionPopup.vue';
import TwoColumnListItemSelectionSheet from '@/components/mobile/TwoColumnListItemSelectionSheet.vue';
@@ -181,6 +182,7 @@ app.component('DateSelectionSheet', DateSelectionSheet);
app.component('DateRangeSelectionSheet', DateRangeSelectionSheet);
app.component('MonthSelectionSheet', MonthSelectionSheet);
app.component('MonthRangeSelectionSheet', MonthRangeSelectionSheet);
app.component('ListNumberInput', ListNumberInput);
app.component('ListItemSelectionSheet', ListItemSelectionSheet);
app.component('ListItemSelectionPopup', ListItemSelectionPopup);
app.component('TwoColumnListItemSelectionSheet', TwoColumnListItemSelectionSheet);
src/views/desktop/exchangerates/list/dialogs/UpdateDialog.vue
+13 -4
View File
@@ -11,11 +11,13 @@
<v-card-text class="my-md-4 w-100 d-flex justify-center">
<v-row>
<v-col cols="12" md="6">
<v-text-field type="number"
:disabled="submitting"
<number-input :disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
:persistent-placeholder="true"
:min-value="USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE"
:max-value="USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE"
:max-decimal-count="4"
v-model="defaultCurrencyAmount"/>
</v-col>
<v-col cols="12" md="6">
@@ -28,11 +30,13 @@
<v-icon :icon="mdiSwapVertical" size="24" />
</v-col>
<v-col cols="12" md="6">
<v-text-field type="number"
:disabled="submitting"
<number-input :disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
:persistent-placeholder="true"
:min-value="USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE"
:max-value="USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE"
:max-decimal-count="4"
v-model="targetCurrencyAmount"/>
</v-col>
<v-col cols="12" md="6">
@@ -68,6 +72,11 @@ import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import {
USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE,
USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE
} from '@/consts/exchange_rate.ts';
import {
mdiSwapVertical
} from '@mdi/js';
src/views/mobile/exchangerates/UpdatePage.vue
+27 -14
View File
@@ -10,13 +10,17 @@
</f7-navbar>
<f7-list form strong inset dividers class="margin-vertical">
<f7-list-input
type="number"
:disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
v-model:value="defaultCurrencyAmount"
></f7-list-input>
<template #list>
<list-number-input
:disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
:min-value="USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE"
:max-value="USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE"
:max-decimal-count="4"
v-model="defaultCurrencyAmount"
></list-number-input>
</template>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
@@ -39,13 +43,17 @@
</f7-block>
<f7-list form strong inset dividers class="margin-vertical">
<f7-list-input
type="number"
:disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
v-model:value="targetCurrencyAmount"
></f7-list-input>
<template #list>
<list-number-input
:disabled="submitting"
:label="tt('Amount')"
:placeholder="tt('Amount')"
:min-value="USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE"
:max-value="USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE"
:max-decimal-count="4"
v-model="targetCurrencyAmount"
></list-number-input>
</template>
<f7-list-item
class="list-item-with-header-and-title list-item-no-item-after"
@@ -88,6 +96,11 @@ import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
import {
USER_CUSTOM_EXCHANGE_RATE_MAX_VALUE,
USER_CUSTOM_EXCHANGE_RATE_MIN_VALUE
} from '@/consts/exchange_rate.ts';
const props = defineProps<{
f7router: Router.Router;
}>();