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

migrate amount input to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-12 16:52:00 +08:00
parent f0e11e952c
commit 89d5cc31af
2 changed files with 291 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/AmountInput.vue
+290 -277
View File
@@ -29,298 +29,311 @@
</v-text-field>
</template>
<script>
import { mapStores } from 'pinia';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useI18n } from '@/locales/helpers.ts';
import type { CurrencyPrependAndAppendText } from '@/core/currency.ts';
import { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
import { removeAll } from '@/lib/common.ts';
import logger from '@/lib/logger.ts';
export default {
props: [
'class',
'color',
'density',
'currency',
'showCurrency',
'label',
'placeholder',
'persistentPlaceholder',
'disabled',
'readonly',
'hide',
'enableRules',
'modelValue'
],
emits: [
'update:modelValue'
],
data() {
const self = this;
const userStore = useUserStore();
const {
tt,
getCurrentDecimalSeparator,
getCurrentDigitGroupingSymbol,
parseAmount,
formatAmount,
getAmountPrependAndAppendText
} = useI18n();
return {
currentValue: self.getFormattedValue(userStore, self.modelValue),
rules: [
(v) => {
if (v === '') {
return self.$t('Amount value is not number');
}
const props = defineProps<{
class?: string,
color?: string,
density?: string,
currency: string,
showCurrency?: boolean,
label?: string,
placeholder?: string,
persistentPlaceholder?: boolean,
disabled?: boolean,
readonly?: boolean,
hide?: boolean,
enableRules?: boolean,
modelValue: number
}>();
try {
const val = self.$locale.parseAmount(userStore, v);
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void;
}>();
if (Number.isNaN(val) || !Number.isFinite(val)) {
return self.$t('Amount value is not number');
}
return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || self.$t('Amount value exceeds limitation');
} catch (ex) {
logger.warn('cannot parse amount in amount input, original value is ' + v, ex);
return self.$t('Amount value is not number');
}
}
]
const rules = [
(v: string) => {
if (v === '') {
return tt('Amount value is not number');
}
},
computed: {
...mapStores(useSettingsStore, useUserStore),
extraClass() {
let finalClass = this.class;
if (this.color) {
finalClass += ` text-${this.color}`;
try {
const val = parseAmount(v);
if (Number.isNaN(val) || !Number.isFinite(val)) {
return tt('Amount value is not number');
}
if (this.currency && this.prependText) {
finalClass += ` has-pretend-text`;
}
return finalClass;
},
prependText() {
if (!this.currency || !this.showCurrency) {
return '';
}
const texts = this.getDisplayCurrencyPrependAndAppendText();
if (!texts) {
return '';
}
return texts.prependText;
},
appendText() {
if (!this.currency || !this.showCurrency) {
return '';
}
const texts = this.getDisplayCurrencyPrependAndAppendText();
if (!texts) {
return '';
}
return texts.appendText;
}
},
watch: {
'currency': function () {
const newStringValue = this.getFormattedValue(this.userStore, this.modelValue);
if (!(newStringValue === '0' && this.currentValue === '')) {
this.currentValue = newStringValue;
}
},
'modelValue': function (newValue) {
const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
if (newValue !== numericCurrentValue) {
const newStringValue = this.getFormattedValue(this.userStore, newValue);
if (!(newStringValue === '0' && this.currentValue === '')) {
this.currentValue = newStringValue;
}
}
},
'currentValue': function (newValue) {
let finalValue = '';
if (newValue) {
const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
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) {
this.currentValue = finalValue;
} else {
this.$emit('update:modelValue', this.$locale.parseAmount(this.userStore, finalValue));
}
}
},
methods: {
onKeyUpDown(e) {
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;
}
const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(this.userStore);
const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
e.preventDefault();
return;
}
let str = e.target.value;
if (str.indexOf(digitGroupingSymbol) >= 0) {
str = removeAll(str, digitGroupingSymbol);
}
if (e.key === '-' && str.lastIndexOf('-') > 0) {
const lastMinusPos = str.lastIndexOf('-');
e.target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
this.currentValue = e.target.value;
e.preventDefault();
return;
}
if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
e.target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
this.currentValue = e.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;
e.target.value = str;
this.currentValue = e.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);
}
e.target.value = (negative ? '-' : '') + str;
this.currentValue = e.target.value;
e.preventDefault();
return;
}
if (decimalLength > 2) {
e.target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
this.currentValue = e.target.value;
e.preventDefault();
return;
}
try {
const val = this.$locale.parseAmount(this.userStore, str);
const finalValue = this.getValidFormattedValue(val, str, decimalIndex >= 0);
if (finalValue !== str) {
e.target.value = finalValue;
this.currentValue = finalValue;
e.preventDefault();
}
} catch (ex) {
ex.target.value = '0';
}
},
onPaste(e) {
if (!e.clipboardData) {
e.preventDefault();
return;
}
const text = e.clipboardData.getData('Text');
if (!text) {
e.preventDefault();
return;
}
const value = this.$locale.parseAmount(this.userStore, text);
const textualValue = this.getFormattedValue(this.userStore, value);
const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore);
const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
this.currentValue = this.getValidFormattedValue(value, textualValue, hasDecimalSeparator);
e.preventDefault();
},
getValidFormattedValue(value, textualValue, hasDecimalSeparator) {
let maxLength = TRANSACTION_MAX_AMOUNT.toString().length;
if (value < 0) {
maxLength = TRANSACTION_MIN_AMOUNT.toString().length;
}
if (value < TRANSACTION_MIN_AMOUNT) {
return this.getFormattedValue(this.userStore, TRANSACTION_MIN_AMOUNT);
} else if (value > TRANSACTION_MAX_AMOUNT) {
return this.getFormattedValue(this.userStore, TRANSACTION_MAX_AMOUNT);
}
if (!hasDecimalSeparator && textualValue.length > maxLength) {
return textualValue.substring(0, maxLength);
} else if (hasDecimalSeparator && textualValue.length > maxLength + 1) {
return textualValue.substring(0, maxLength + 1);
}
return textualValue;
},
getFormattedValue(userStore, value) {
if (!Number.isNaN(value) && Number.isFinite(value)) {
const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore);
return removeAll(this.$locale.formatAmount(userStore, value, this.currency), digitGroupingSymbol);
}
return '0';
},
getDisplayCurrencyPrependAndAppendText() {
const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
return this.$locale.getAmountPrependAndAppendText(this.settingsStore, this.userStore, this.currency, isPlural);
return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || tt('Amount value exceeds limitation');
} catch (ex) {
logger.warn('cannot parse amount in amount input, original value is ' + v, ex);
return tt('Amount value is not number');
}
}
];
const currentValue = ref<string>(getFormattedValue(props.modelValue));
const prependText = computed<string | undefined>(() => {
if (!props.currency || !props.showCurrency) {
return '';
}
const texts = getDisplayCurrencyPrependAndAppendText();
if (!texts) {
return '';
}
return texts.prependText;
});
const appendText = computed<string | undefined>(() => {
if (!props.currency || !props.showCurrency) {
return '';
}
const texts = getDisplayCurrencyPrependAndAppendText();
if (!texts) {
return '';
}
return texts.appendText;
});
const extraClass = computed<string>(() => {
let finalClass = props.class || '';
if (props.color) {
finalClass += ` text-${props.color}`;
}
if (props.currency && prependText.value) {
finalClass += ` has-pretend-text`;
}
return finalClass;
});
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;
}
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) {
target.value = '0';
}
}
function onPaste(e: ClipboardEvent): void {
if (!e.clipboardData) {
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 getValidFormattedValue(value: number, textualValue: string, hasDecimalSeparator: boolean): string {
let maxLength = TRANSACTION_MAX_AMOUNT.toString().length;
if (value < 0) {
maxLength = TRANSACTION_MIN_AMOUNT.toString().length;
}
if (value < TRANSACTION_MIN_AMOUNT) {
return getFormattedValue(TRANSACTION_MIN_AMOUNT);
} else if (value > TRANSACTION_MAX_AMOUNT) {
return getFormattedValue(TRANSACTION_MAX_AMOUNT);
}
if (!hasDecimalSeparator && textualValue.length > maxLength) {
return textualValue.substring(0, maxLength);
} else if (hasDecimalSeparator && textualValue.length > maxLength + 1) {
return textualValue.substring(0, maxLength + 1);
}
return textualValue;
}
function getFormattedValue(value: number): string {
if (!Number.isNaN(value) && Number.isFinite(value)) {
const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
return removeAll(formatAmount(value, props.currency), digitGroupingSymbol);
}
return '0';
}
function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText | null {
const numericCurrentValue = parseAmount(currentValue.value);
const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
return getAmountPrependAndAppendText(props.currency, isPlural);
}
watch(() => props.currency, () => {
const newStringValue = getFormattedValue(props.modelValue);
if (!(newStringValue === '0' && currentValue.value === '')) {
currentValue.value = newStringValue;
}
});
watch(() => props.modelValue, (newValue) => {
const numericCurrentValue = parseAmount(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 {
emit('update:modelValue', parseAmount(finalValue));
}
});
</script>
<style>
src/locales/helper.js
+1 -10
View File
@@ -53,8 +53,7 @@ import {
import {
getCurrencyFraction,
appendCurrencySymbol,
getAmountPrependAndAppendCurrencySymbol
appendCurrencySymbol
} from '@/lib/currency.ts';
import {
@@ -981,13 +980,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions);
}
function getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, isPlural, translateFn) {
const currencyDisplayType = getCurrentCurrencyDisplayType(translateFn, userStore);
const currencyUnit = getCurrencyUnitName(currencyCode, isPlural, translateFn);
const currencyName = getCurrencyName(currencyCode, translateFn);
return getAmountPrependAndAppendCurrencySymbol(currencyDisplayType, currencyCode, currencyUnit, currencyName, isPlural);
}
function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
const ret = [];
let defaultAmountName = '';
@@ -1548,7 +1540,6 @@ export function i18nFunctions(i18nGlobal) {
formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore),
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, i18nGlobal.t, userStore),
getAmountPrependAndAppendText: (settingsStore, userStore, currencyCode, isPlural) => getAmountPrependAndAppendText(currencyCode, userStore, settingsStore, isPlural, i18nGlobal.t),
getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),