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

code refactor

Browse Source
This commit is contained in:
MaysWind
2025-06-02 00:31:45 +08:00
parent cab13cee3c
commit baa6850fcb
2 changed files with 186 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/base/CommonNumberInputBase.ts
+174
View File
@@ -0,0 +1,174 @@
import { ref } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import { removeAll } from '@/lib/common.ts';
import logger from '@/lib/logger.ts';
export interface CommonNumberInputProps {
label?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
modelValue: number;
}
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) {
const {
getCurrentDecimalSeparator,
getCurrentDigitGroupingSymbol
} = useI18n();
const currentValue = ref<string>(initValue);
function onKeyUpDown(e: KeyboardEvent): void {
if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3))
|| e.key === 'ArrowLeft' || e.key === 'ArrowRight'
|| e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
|| e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Del') {
return;
}
if (props.readonly || props.disabled) {
e.preventDefault();
return;
}
const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
const decimalSeparator = getCurrentDecimalSeparator();
if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
e.preventDefault();
return;
}
if (maxDecimalCount === 0 && e.key === decimalSeparator) {
e.preventDefault();
return;
}
if (!e.target) {
return;
}
const target = e.target as HTMLInputElement;
let str = target.value;
if (str.indexOf(digitGroupingSymbol) >= 0) {
str = removeAll(str, digitGroupingSymbol);
}
if (e.key === '-' && str.lastIndexOf('-') > 0) {
const lastMinusPos = str.lastIndexOf('-');
target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
currentValue.value = target.value;
e.preventDefault();
return;
}
if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
currentValue.value = target.value;
e.preventDefault();
return;
}
if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
const negative = str.charAt(0) === '-';
if (negative) {
str = str.substring(1);
}
str = (negative ? '-0' : '0') + str;
target.value = str;
currentValue.value = target.value;
e.preventDefault();
return;
}
let decimalLength = 0;
const decimalIndex = str.indexOf(decimalSeparator);
if (decimalIndex >= 0) {
decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
} else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
const negative = str.charAt(0) === '-';
if (negative) {
str = str.substring(1);
}
while (str.charAt(0) === '0' && (str.length >= 2 || e.key !== '0')) {
str = str.substring(1);
}
target.value = (negative ? '-' : '') + str;
currentValue.value = target.value;
e.preventDefault();
return;
}
if (maxDecimalCount > 0 && decimalLength > maxDecimalCount) {
target.value = str.substring(0, Math.min(decimalIndex + maxDecimalCount + 1, str.length - 1));
currentValue.value = target.value;
e.preventDefault();
return;
} else if (maxDecimalCount === 0 && decimalIndex >= 0) {
target.value = str.substring(0, decimalIndex);
currentValue.value = target.value;
e.preventDefault();
return;
}
try {
const val = parseNumber(str);
const finalValue = getValidFormattedValue(val, str, decimalIndex >= 0);
if (finalValue !== str) {
target.value = finalValue;
currentValue.value = finalValue;
e.preventDefault();
}
} catch (ex) {
logger.warn('cannot parse input number, original value is ' + str, ex);
target.value = '0';
}
}
function onPaste(e: ClipboardEvent): void {
if (!e.clipboardData || props.readonly || props.disabled) {
e.preventDefault();
return;
}
const text = e.clipboardData.getData('Text');
if (!text) {
e.preventDefault();
return;
}
const value = parseNumber(text);
const textualValue = formatNumber(value);
const decimalSeparator = getCurrentDecimalSeparator();
const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
currentValue.value = getValidFormattedValue(value, textualValue, hasDecimalSeparator);
e.preventDefault();
}
return {
// states
currentValue,
// functions
onKeyUpDown,
onPaste
};
}
src/components/desktop/AmountInput.vue
+12 -137
View File
@@ -72,9 +72,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 { DecimalSeparator } from '@/core/numeral.ts';
import type { CurrencyPrependAndAppendText } from '@/core/currency.ts';
import { DEFAULT_DECIMAL_NUMBER_COUNT } from '@/consts/numeral.ts';
import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
import { isNumber, replaceAll, removeAll } from '@/lib/common.ts';
import { evaluateExpression } from '@/lib/evaluator.ts';
@@ -89,23 +91,20 @@ import {
type SnackBarType = InstanceType<typeof SnackBar>;
const props = defineProps<{
interface DesktopAmountInputProps extends CommonNumberInputProps {
class?: string;
color?: string;
density?: ComponentDensity;
currency: string;
showCurrency?: boolean;
label?: string;
placeholder?: string;
persistentPlaceholder?: boolean;
disabled?: boolean;
readonly?: boolean;
hide?: boolean;
enableRules?: boolean;
enableFormula?: boolean;
flipNegative?: boolean;
modelValue: number;
}>();
}
const props = defineProps<DesktopAmountInputProps>();
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void;
@@ -121,6 +120,12 @@ const {
getAmountPrependAndAppendText
} = useI18n();
const {
currentValue,
onKeyUpDown,
onPaste
} = useCommonNumberInputBase(props, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmount, getFormattedValue, getValidFormattedValue);
const snackbar = useTemplateRef<SnackBarType>('snackbar');
const rules = [
@@ -144,7 +149,6 @@ const rules = [
}
];
const currentValue = ref<string>(getInitedFormattedValue(props.modelValue, props.flipNegative));
const currentFormula = ref<string>('');
const formulaMode = ref<boolean>(false);
@@ -228,135 +232,6 @@ function exitFormulaMode(): void {
currentFormula.value = '';
}
function onKeyUpDown(e: KeyboardEvent): void {
if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3))
|| e.key === 'ArrowLeft' || e.key === 'ArrowRight'
|| e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
|| e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Del') {
return;
}
if (props.readonly || props.disabled) {
e.preventDefault();
return;
}
const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
const decimalSeparator = getCurrentDecimalSeparator();
if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
e.preventDefault();
return;
}
if (!e.target) {
return;
}
const target = e.target as HTMLInputElement;
let str = target.value;
if (str.indexOf(digitGroupingSymbol) >= 0) {
str = removeAll(str, digitGroupingSymbol);
}
if (e.key === '-' && str.lastIndexOf('-') > 0) {
const lastMinusPos = str.lastIndexOf('-');
target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
currentValue.value = target.value;
e.preventDefault();
return;
}
if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
currentValue.value = target.value;
e.preventDefault();
return;
}
if (e.key === decimalSeparator && (str.indexOf(decimalSeparator) === 0 || (str.indexOf(decimalSeparator) === 1 && str.charAt(0) === '-'))) {
const negative = str.charAt(0) === '-';
if (negative) {
str = str.substring(1);
}
str = (negative ? '-0' : '0') + str;
target.value = str;
currentValue.value = target.value;
e.preventDefault();
return;
}
let decimalLength = 0;
const decimalIndex = str.indexOf(decimalSeparator);
if (decimalIndex >= 0) {
decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
} else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
const negative = str.charAt(0) === '-';
if (negative) {
str = str.substring(1);
}
while (str.charAt(0) === '0' && (str.length >= 2 || e.key !== '0')) {
str = str.substring(1);
}
target.value = (negative ? '-' : '') + str;
currentValue.value = target.value;
e.preventDefault();
return;
}
if (decimalLength > 2) {
target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
currentValue.value = target.value;
e.preventDefault();
return;
}
try {
const val = parseAmount(str);
const finalValue = getValidFormattedValue(val, str, decimalIndex >= 0);
if (finalValue !== str) {
target.value = finalValue;
currentValue.value = finalValue;
e.preventDefault();
}
} catch (ex) {
logger.warn('cannot parse amount in amount input, original value is ' + str, ex);
target.value = '0';
}
}
function onPaste(e: ClipboardEvent): void {
if (!e.clipboardData || props.readonly || props.disabled) {
e.preventDefault();
return;
}
const text = e.clipboardData.getData('Text');
if (!text) {
e.preventDefault();
return;
}
const value = parseAmount(text);
const textualValue = getFormattedValue(value);
const decimalSeparator = getCurrentDecimalSeparator();
const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
currentValue.value = getValidFormattedValue(value, textualValue, hasDecimalSeparator);
e.preventDefault();
}
function onClick(e: MouseEvent): void {
if (!props.disabled && !props.readonly && props.modelValue === 0 && e.target instanceof HTMLInputElement) {
const input = e.target as HTMLInputElement;