mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-20 17:54:30 +08:00
Code Issues 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
+149 -136
View File
@@ -29,147 +29,110 @@
</v-text-field> </v-text-field>
</template> </template>
<script> <script setup lang="ts">
import { mapStores } from 'pinia'; import { ref, computed, watch } from 'vue';
import { useSettingsStore } from '@/stores/setting.ts';
import { useUserStore } from '@/stores/user.ts';
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 { TRANSACTION_MIN_AMOUNT, TRANSACTION_MAX_AMOUNT } from '@/consts/transaction.ts';
import { removeAll } from '@/lib/common.ts'; import { removeAll } from '@/lib/common.ts';
import logger from '@/lib/logger.ts'; import logger from '@/lib/logger.ts';
export default { const {
props: [ tt,
'class', getCurrentDecimalSeparator,
'color', getCurrentDigitGroupingSymbol,
'density', parseAmount,
'currency', formatAmount,
'showCurrency', getAmountPrependAndAppendText
'label', } = useI18n();
'placeholder',
'persistentPlaceholder',
'disabled',
'readonly',
'hide',
'enableRules',
'modelValue'
],
emits: [
'update:modelValue'
],
data() {
const self = this;
const userStore = useUserStore();
return { const props = defineProps<{
currentValue: self.getFormattedValue(userStore, self.modelValue), class?: string,
rules: [ color?: string,
(v) => { density?: string,
currency: string,
showCurrency?: boolean,
label?: string,
placeholder?: string,
persistentPlaceholder?: boolean,
disabled?: boolean,
readonly?: boolean,
hide?: boolean,
enableRules?: boolean,
modelValue: number
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: number): void;
}>();
const rules = [
(v: string) => {
if (v === '') { if (v === '') {
return self.$t('Amount value is not number'); return tt('Amount value is not number');
} }
try { try {
const val = self.$locale.parseAmount(userStore, v); const val = parseAmount(v);
if (Number.isNaN(val) || !Number.isFinite(val)) { if (Number.isNaN(val) || !Number.isFinite(val)) {
return self.$t('Amount value is not number'); return tt('Amount value is not number');
} }
return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || self.$t('Amount value exceeds limitation'); return (val >= TRANSACTION_MIN_AMOUNT && val <= TRANSACTION_MAX_AMOUNT) || tt('Amount value exceeds limitation');
} catch (ex) { } catch (ex) {
logger.warn('cannot parse amount in amount input, original value is ' + v, ex); logger.warn('cannot parse amount in amount input, original value is ' + v, ex);
return self.$t('Amount value is not number'); return tt('Amount value is not number');
} }
} }
] ];
}
},
computed: {
...mapStores(useSettingsStore, useUserStore),
extraClass() {
let finalClass = this.class;
if (this.color) { const currentValue = ref<string>(getFormattedValue(props.modelValue));
finalClass += ` text-${this.color}`; const prependText = computed<string | undefined>(() => {
} if (!props.currency || !props.showCurrency) {
if (this.currency && this.prependText) {
finalClass += ` has-pretend-text`;
}
return finalClass;
},
prependText() {
if (!this.currency || !this.showCurrency) {
return ''; return '';
} }
const texts = this.getDisplayCurrencyPrependAndAppendText(); const texts = getDisplayCurrencyPrependAndAppendText();
if (!texts) { if (!texts) {
return ''; return '';
} }
return texts.prependText; return texts.prependText;
}, });
appendText() {
if (!this.currency || !this.showCurrency) { const appendText = computed<string | undefined>(() => {
if (!props.currency || !props.showCurrency) {
return ''; return '';
} }
const texts = this.getDisplayCurrencyPrependAndAppendText(); const texts = getDisplayCurrencyPrependAndAppendText();
if (!texts) { if (!texts) {
return ''; return '';
} }
return texts.appendText; return texts.appendText;
} });
},
watch: {
'currency': function () {
const newStringValue = this.getFormattedValue(this.userStore, this.modelValue);
if (!(newStringValue === '0' && this.currentValue === '')) { const extraClass = computed<string>(() => {
this.currentValue = newStringValue; let finalClass = props.class || '';
}
},
'modelValue': function (newValue) {
const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue);
if (newValue !== numericCurrentValue) { if (props.color) {
const newStringValue = this.getFormattedValue(this.userStore, newValue); finalClass += ` text-${props.color}`;
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 (props.currency && prependText.value) {
} finalClass += ` has-pretend-text`;
} }
if (finalValue !== newValue) { return finalClass;
this.currentValue = finalValue; });
} else {
this.$emit('update:modelValue', this.$locale.parseAmount(this.userStore, finalValue)); function onKeyUpDown(e: KeyboardEvent): void {
}
}
},
methods: {
onKeyUpDown(e) {
if (e.altKey || e.ctrlKey || e.metaKey || (e.key.indexOf('F') === 0 && (e.key.length === 2 || e.key.length === 3)) 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 === 'ArrowLeft' || e.key === 'ArrowRight'
|| e.key === 'Home' || e.key === 'End' || e.key === 'Tab' || e.key === 'Home' || e.key === 'End' || e.key === 'Tab'
@@ -177,15 +140,21 @@ export default {
return; return;
} }
const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(this.userStore); const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore); const decimalSeparator = getCurrentDecimalSeparator();
if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) { if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
e.preventDefault(); e.preventDefault();
return; return;
} }
let str = e.target.value; if (!e.target) {
return;
}
const target = e.target as HTMLInputElement;
let str = target.value;
if (str.indexOf(digitGroupingSymbol) >= 0) { if (str.indexOf(digitGroupingSymbol) >= 0) {
str = removeAll(str, digitGroupingSymbol); str = removeAll(str, digitGroupingSymbol);
@@ -193,16 +162,16 @@ export default {
if (e.key === '-' && str.lastIndexOf('-') > 0) { if (e.key === '-' && str.lastIndexOf('-') > 0) {
const lastMinusPos = str.lastIndexOf('-'); const lastMinusPos = str.lastIndexOf('-');
e.target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length); target.value = str.substring(0, lastMinusPos) + str.substring(lastMinusPos + 1, str.length);
this.currentValue = e.target.value; currentValue.value = target.value;
e.preventDefault(); e.preventDefault();
return; return;
} }
if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) { if (e.key === decimalSeparator && str.indexOf(decimalSeparator) !== str.lastIndexOf(decimalSeparator)) {
const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator); const lastDecimalSeparatorPos = str.lastIndexOf(decimalSeparator);
e.target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length); target.value = str.substring(0, lastDecimalSeparatorPos) + str.substring(lastDecimalSeparatorPos + 1, str.length);
this.currentValue = e.target.value; currentValue.value = target.value;
e.preventDefault(); e.preventDefault();
return; return;
} }
@@ -215,8 +184,8 @@ export default {
} }
str = (negative ? '-0' : '0') + str; str = (negative ? '-0' : '0') + str;
e.target.value = str; target.value = str;
this.currentValue = e.target.value; currentValue.value = target.value;
e.preventDefault(); e.preventDefault();
return; return;
} }
@@ -237,33 +206,34 @@ export default {
str = str.substring(1); str = str.substring(1);
} }
e.target.value = (negative ? '-' : '') + str; target.value = (negative ? '-' : '') + str;
this.currentValue = e.target.value; currentValue.value = target.value;
e.preventDefault(); e.preventDefault();
return; return;
} }
if (decimalLength > 2) { if (decimalLength > 2) {
e.target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1)); target.value = str.substring(0, Math.min(decimalIndex + 3, str.length - 1));
this.currentValue = e.target.value; currentValue.value = target.value;
e.preventDefault(); e.preventDefault();
return; return;
} }
try { try {
const val = this.$locale.parseAmount(this.userStore, str); const val = parseAmount(str);
const finalValue = this.getValidFormattedValue(val, str, decimalIndex >= 0); const finalValue = getValidFormattedValue(val, str, decimalIndex >= 0);
if (finalValue !== str) { if (finalValue !== str) {
e.target.value = finalValue; target.value = finalValue;
this.currentValue = finalValue; currentValue.value = finalValue;
e.preventDefault(); e.preventDefault();
} }
} catch (ex) { } catch (ex) {
ex.target.value = '0'; target.value = '0';
} }
}, }
onPaste(e) {
function onPaste(e: ClipboardEvent): void {
if (!e.clipboardData) { if (!e.clipboardData) {
e.preventDefault(); e.preventDefault();
return; return;
@@ -276,15 +246,16 @@ export default {
return; return;
} }
const value = this.$locale.parseAmount(this.userStore, text); const value = parseAmount(text);
const textualValue = this.getFormattedValue(this.userStore, value); const textualValue = getFormattedValue(value);
const decimalSeparator = this.$locale.getCurrentDecimalSeparator(this.userStore); const decimalSeparator = getCurrentDecimalSeparator();
const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0; const hasDecimalSeparator = text.indexOf(decimalSeparator) >= 0;
this.currentValue = this.getValidFormattedValue(value, textualValue, hasDecimalSeparator); currentValue.value = getValidFormattedValue(value, textualValue, hasDecimalSeparator);
e.preventDefault(); e.preventDefault();
}, }
getValidFormattedValue(value, textualValue, hasDecimalSeparator) {
function getValidFormattedValue(value: number, textualValue: string, hasDecimalSeparator: boolean): string {
let maxLength = TRANSACTION_MAX_AMOUNT.toString().length; let maxLength = TRANSACTION_MAX_AMOUNT.toString().length;
if (value < 0) { if (value < 0) {
@@ -292,9 +263,9 @@ export default {
} }
if (value < TRANSACTION_MIN_AMOUNT) { if (value < TRANSACTION_MIN_AMOUNT) {
return this.getFormattedValue(this.userStore, TRANSACTION_MIN_AMOUNT); return getFormattedValue(TRANSACTION_MIN_AMOUNT);
} else if (value > TRANSACTION_MAX_AMOUNT) { } else if (value > TRANSACTION_MAX_AMOUNT) {
return this.getFormattedValue(this.userStore, TRANSACTION_MAX_AMOUNT); return getFormattedValue(TRANSACTION_MAX_AMOUNT);
} }
if (!hasDecimalSeparator && textualValue.length > maxLength) { if (!hasDecimalSeparator && textualValue.length > maxLength) {
@@ -304,23 +275,65 @@ export default {
} }
return textualValue; return textualValue;
}, }
getFormattedValue(userStore, value) {
function getFormattedValue(value: number): string {
if (!Number.isNaN(value) && Number.isFinite(value)) { if (!Number.isNaN(value) && Number.isFinite(value)) {
const digitGroupingSymbol = this.$locale.getCurrentDigitGroupingSymbol(userStore); const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
return removeAll(this.$locale.formatAmount(userStore, value, this.currency), digitGroupingSymbol); return removeAll(formatAmount(value, props.currency), digitGroupingSymbol);
} }
return '0'; return '0';
}, }
getDisplayCurrencyPrependAndAppendText() {
const numericCurrentValue = this.$locale.parseAmount(this.userStore, this.currentValue); function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText | null {
const numericCurrentValue = parseAmount(currentValue.value);
const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100; const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
return this.$locale.getAmountPrependAndAppendText(this.settingsStore, this.userStore, this.currency, isPlural); 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> </script>
<style> <style>
src/locales/helper.js
+1 -10
View File
@@ -53,8 +53,7 @@ import {
import { import {
getCurrencyFraction, getCurrencyFraction,
appendCurrencySymbol, appendCurrencySymbol
getAmountPrependAndAppendCurrencySymbol
} from '@/lib/currency.ts'; } from '@/lib/currency.ts';
import { import {
@@ -981,13 +980,6 @@ function getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRat
return getAdaptiveDisplayAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, numberFormatOptions); 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) { function getAllExpenseIncomeAmountColors(translateFn, expenseOrIncome) {
const ret = []; const ret = [];
let defaultAmountName = ''; let defaultAmountName = '';
@@ -1548,7 +1540,6 @@ export function i18nFunctions(i18nGlobal) {
formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore), formatAmountWithCurrency: (settingsStore, userStore, value, currencyCode) => getFormattedAmountWithCurrency(value, currencyCode, i18nGlobal.t, userStore, settingsStore),
formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore), formatExchangeRateAmount: (userStore, value) => getFormattedExchangeRateAmount(value, i18nGlobal.t, userStore),
getAdaptiveAmountRate: (userStore, amount1, amount2, fromExchangeRate, toExchangeRate) => getAdaptiveAmountRate(amount1, amount2, fromExchangeRate, toExchangeRate, 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), getAllExpenseAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 1),
getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2), getAllIncomeAmountColors: () => getAllExpenseIncomeAmountColors(i18nGlobal.t, 2),
getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t), getAllAccountCategories: () => getAllAccountCategories(i18nGlobal.t),