support changing numeral system

src/components/base/CommonNumberInputBase.ts

@@ -2,6 +2,8 @@ import { ref } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import { NumeralSystem } from '@/core/numeral.ts';
+
 import { removeAll } from '@/lib/common.ts';
 import logger from '@/lib/logger.ts';
 
@@ -19,6 +21,7 @@ export type GetValidFormattedValueFunction = (value: number, textualValue: strin
 
 export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecimalCount: number, initValue: string, parseNumber: ParseNumberFunction, formatNumber: FormatNumberFunction, getValidFormattedValue: GetValidFormattedValueFunction) {
     const {
+        getCurrentNumeralSystemType,
         getCurrentDecimalSeparator,
         getCurrentDigitGroupingSymbol
     } = useI18n();
@@ -38,10 +41,11 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim
             return;
         }
 
+        const numeralSystem = getCurrentNumeralSystemType();
         const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
         const decimalSeparator = getCurrentDecimalSeparator();
 
-        if (!('0' <= e.key && e.key <= '9') && e.key !== '-' && e.key !== decimalSeparator) {
+        if (!NumeralSystem.WesternArabicNumerals.isDigit(e.key) && !numeralSystem.isDigit(e.key) && e.key !== '-' && e.key !== decimalSeparator) {
             e.preventDefault();
             return;
         }
@@ -86,7 +90,7 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim
                 str = str.substring(1);
             }
 
-            str = (negative ? '-0' : '0') + str;
+            str = (negative ? `-${numeralSystem.digitZero}` : numeralSystem.digitZero) + str;
             target.value = str;
             currentValue.value = target.value;
             e.preventDefault();
@@ -98,14 +102,14 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim
 
         if (decimalIndex >= 0) {
             decimalLength = str.length - str.indexOf(decimalSeparator) - 1;
-        } else if ((str.startsWith('0') && str.length >= 2) || (str.startsWith('-0') && str.length >= 3)) {
+        } else if ((str.startsWith(numeralSystem.digitZero) && str.length >= 2) || (str.startsWith(`-${numeralSystem.digitZero}`) && 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')) {
+            while (str.charAt(0) === numeralSystem.digitZero && (str.length >= 2 || e.key !== numeralSystem.digitZero)) {
                 str = str.substring(1);
             }
 
@@ -138,7 +142,7 @@ export function useCommonNumberInputBase(props: CommonNumberInputProps, maxDecim
             }
         } catch (ex) {
             logger.warn('cannot parse input number, original value is ' + str, ex);
-            target.value = '0';
+            target.value = numeralSystem.digitZero;
         }
     }
 

src/components/base/NumberInputBase.ts

@@ -4,6 +4,7 @@ import { useI18n } from '@/locales/helpers.ts';
 import { type CommonNumberInputProps, useCommonNumberInputBase } from '@/components/base/CommonNumberInputBase.ts';
 
 import { isNumber, replaceAll, removeAll } from '@/lib/common.ts';
+import { NumeralSystem } from '@/core/numeral.ts';
 
 export interface NumberInputProps extends CommonNumberInputProps {
     minValue?: number;
@@ -17,6 +18,7 @@ export interface NumberInputEmits {
 
 export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmits) {
     const {
+        getCurrentNumeralSystemType,
         getCurrentDecimalSeparator,
         getCurrentDigitGroupingSymbol
     } = useI18n();
@@ -32,17 +34,20 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi
             return 0;
         }
 
+        const numeralSystem = getCurrentNumeralSystemType();
         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) {
+            if (!NumeralSystem.WesternArabicNumerals.isDigit(value[i]) && !numeralSystem.isDigit(value[i]) && value[i] !== '-' && value[i] !== decimalSeparator) {
                 break;
             }
 
             finalValue += value[i];
         }
 
+        finalValue = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(finalValue);
+
         if (decimalSeparator !== '.') {
             finalValue = replaceAll(finalValue, decimalSeparator, '.');
         }
@@ -65,50 +70,72 @@ export function useNumberInputBase(props: NumberInputProps, emit: NumberInputEmi
     }
 
     function getFormattedValue(value: number): string {
+        const numeralSystem = getCurrentNumeralSystemType();
+
         if (!Number.isNaN(value) && Number.isFinite(value)) {
             const decimalSeparator = getCurrentDecimalSeparator();
 
             if (isNumber(props.maxDecimalCount) && props.maxDecimalCount >= 0) {
-                return replaceAll(value.toFixed(props.maxDecimalCount), '.', decimalSeparator);
+                return replaceAll(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(value.toFixed(props.maxDecimalCount)), '.', decimalSeparator);
             } else {
-                return replaceAll(value.toString(), '.', decimalSeparator);
+                return replaceAll(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(value.toString(10)), '.', decimalSeparator);
             }
         }
 
-        return '0';
+        return numeralSystem.digitZero;
     }
 
     watch(() => props.modelValue, (newValue) => {
+        const numeralSystem = getCurrentNumeralSystemType();
         const numericCurrentValue = parseNumber(currentValue.value);
 
         if (newValue !== numericCurrentValue) {
             const newStringValue = getFormattedValue(newValue);
 
-            if (!(newStringValue === '0' && currentValue.value === '')) {
+            if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) {
                 currentValue.value = newStringValue;
             }
         }
     });
 
     watch(currentValue, (newValue) => {
+        const numeralSystem = getCurrentNumeralSystemType();
+        let actualNumeralSystem: NumeralSystem | undefined = undefined;
         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;
+            if (newValue[0] === '-' || newValue[0] === decimalSeparator) {
+                actualNumeralSystem = NumeralSystem.detect(newValue[1]);
+            } else {
+                actualNumeralSystem = NumeralSystem.detect(newValue[0]);
+            }
+
+            if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.type)) {
+                for (let i = 0; i < newValue.length; i++) {
+                    if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) {
+                        break;
+                    }
+
+                    finalValue += newValue[i];
                 }
 
-                finalValue += newValue[i];
+                finalValue = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalValue);
+            } else if (newValue === '-' || newValue === decimalSeparator || newValue === `-${decimalSeparator}`) {
+                finalValue = newValue;
             }
         }
 
         if (finalValue !== newValue) {
             currentValue.value = finalValue;
         } else {
-            const value: number = parseNumber(finalValue);
+            let value: number = parseNumber(finalValue);
+
+            if (Number.isNaN(value) || !Number.isFinite(value)) {
+                value = 0;
+            }
+
             emit('update:modelValue', value);
         }
     });

src/components/base/PieChartBase.ts

@@ -35,7 +35,7 @@ export interface CommonPieChartProps {
 }
 
 export function usePieChartBase(props: CommonPieChartProps) {
-    const { formatAmountWithCurrency, formatPercent } = useI18n();
+    const { formatAmountToLocalizedNumeralsWithCurrency, formatPercentToLocalizedNumerals } = useI18n();
 
     const selectedIndex = ref<number>(0);
 
@@ -72,8 +72,8 @@ export function usePieChartBase(props: CommonPieChartProps) {
                     sourceItem: item
                 };
 
-                finalItem.displayPercent = formatPercent(finalItem.percent, 2, '&lt;0.01');
-                finalItem.displayValue = formatAmountWithCurrency(finalItem.value, props.defaultCurrency);
+                finalItem.displayPercent = formatPercentToLocalizedNumerals(finalItem.percent, 2, '&lt;0.01');
+                finalItem.displayValue = formatAmountToLocalizedNumeralsWithCurrency(finalItem.value, props.defaultCurrency);
 
                 validItems.push(finalItem);
             }

src/components/common/PinCodeInput.vue

@@ -21,6 +21,10 @@
 <script setup lang="ts">
 import { ref, computed, watch, useTemplateRef } from 'vue';
 
+import { useI18n } from '@/locales/helpers.ts';
+
+import { NumeralSystem } from '@/core/numeral.ts';
+
 interface PinCode {
     value: string;
     inputType: string;
@@ -42,6 +46,8 @@ const emit = defineEmits<{
     (e: 'pincode:confirm', value: string): void;
 }>();
 
+const { getCurrentNumeralSystemType } = useI18n();
+
 const codes = ref<PinCode[]>([]);
 const pinCodeInputs = useTemplateRef<HTMLInputElement[]>('pin-code-input');
 
@@ -148,6 +154,8 @@ function setNextFocus(index: number): void {
 }
 
 function onKeydown(index: number, event: KeyboardEvent): void {
+    const numeralSystem = getCurrentNumeralSystemType();
+
     if (event.altKey || (event.key.indexOf('F') === 0 && (event.key.length === 2 || event.key.length === 3))) {
         return;
     }
@@ -208,13 +216,23 @@ function onKeydown(index: number, event: KeyboardEvent): void {
         return;
     }
 
-    if (event.key.length === 1 && '0' <= event.key && event.key <= '9') {
-        codes.value[index].value = event.key;
-        setInputType(index);
-        setNextFocus(index);
+    if (event.key.length === 1) {
+        let digit = '';
 
-        if (props.autoConfirm && finalPinCode.value.length === props.length) {
-            emit('pincode:confirm', finalPinCode.value);
+        if (NumeralSystem.WesternArabicNumerals.isDigit(event.key)) {
+            digit = event.key;
+        } else if (numeralSystem.isDigit(event.key)) {
+            digit = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(event.key);
+        }
+
+        if (digit) {
+            codes.value[index].value = digit;
+            setInputType(index);
+            setNextFocus(index);
+
+            if (props.autoConfirm && finalPinCode.value.length === props.length) {
+                emit('pincode:confirm', finalPinCode.value);
+            }
         }
     }
 

src/components/desktop/AccountBalanceTrendsChart.vue

@@ -47,7 +47,7 @@ interface AccountBalanceTrendsChartDataItem {
 const props = defineProps<DesktopAccountBalanceTrendsChartProps>();
 
 const theme = useTheme();
-const { tt, formatAmountWithCurrency } = useI18n();
+const { tt, formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
 const { allDataItems, allDisplayDateRanges } = useAccountBalanceTrendsChartBase(props);
 
 const userStore = useUserStore();
@@ -129,8 +129,8 @@ const yAxisWidth = computed<number>(() => {
         }
     }
 
-    const maxValueText = formatAmountWithCurrency(maxValue, props.account.currency);
-    const minValueText = formatAmountWithCurrency(minValue, props.account.currency);
+    const maxValueText = formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.account.currency);
+    const minValueText = formatAmountToLocalizedNumeralsWithCurrency(minValue, props.account.currency);
     const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
 
     const canvas = document.createElement('canvas');
@@ -175,27 +175,27 @@ const chartOptions = computed<object>(() => {
                     const displayItems: NameValue[] = [
                         {
                             name: tt('Opening Balance'),
-                            value: formatAmountWithCurrency(dataItem.openingBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.openingBalance, props.account.currency)
                         },
                         {
                             name: tt('Closing Balance'),
-                            value: formatAmountWithCurrency(dataItem.closingBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.closingBalance, props.account.currency)
                         },
                         {
                             name: tt('Minimum Balance'),
-                            value: formatAmountWithCurrency(dataItem.minimumBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.minimumBalance, props.account.currency)
                         },
                         {
                             name: tt('Maximum Balance'),
-                            value: formatAmountWithCurrency(dataItem.maximumBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.maximumBalance, props.account.currency)
                         },
                         {
                             name: tt('Median Balance'),
-                            value: formatAmountWithCurrency(dataItem.medianBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.medianBalance, props.account.currency)
                         },
                         {
                             name: tt('Average Balance'),
-                            value: formatAmountWithCurrency(dataItem.averageBalance, props.account.currency)
+                            value: formatAmountToLocalizedNumeralsWithCurrency(dataItem.averageBalance, props.account.currency)
                         }
                     ];
 
@@ -210,7 +210,7 @@ const chartOptions = computed<object>(() => {
                     return tooltip;
                 } else {
                     const amount = params[0].data as number;
-                    const value = formatAmountWithCurrency(amount, props.account.currency);
+                    const value = formatAmountToLocalizedNumeralsWithCurrency(amount, props.account.currency);
 
                     return `${params[0].name}<br/>`
                         + '<div><span class="chart-pointer" style="background-color: #' + DEFAULT_CHART_COLORS[0] + '"></span>'
@@ -234,13 +234,13 @@ const chartOptions = computed<object>(() => {
                 type: 'value',
                 axisLabel: {
                     formatter: (value: string) => {
-                        return formatAmountWithCurrency(value, props.account.currency);
+                        return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.account.currency);
                     }
                 },
                 axisPointer: {
                     label: {
                         formatter: (params: CallbackDataParams) => {
-                            return formatAmountWithCurrency(Math.floor(params.value as number), props.account.currency);
+                            return formatAmountToLocalizedNumeralsWithCurrency(Math.floor(params.value as number), props.account.currency);
                         }
                     }
                 },

src/components/desktop/AmountInput.vue

@@ -74,11 +74,11 @@ 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 { NumeralSystem, 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 { isNumber, replaceAll } from '@/lib/common.ts';
 import { evaluateExpression } from '@/lib/evaluator.ts';
 import type { ComponentDensity } from '@/lib/ui/desktop.ts';
 import logger from '@/lib/logger.ts';
@@ -112,11 +112,11 @@ const emit = defineEmits<{
 
 const {
     tt,
+    getCurrentNumeralSystemType,
     getCurrentDecimalSeparator,
-    getCurrentDigitGroupingSymbol,
-    parseAmount,
-    formatAmount,
-    formatNumber,
+    parseAmountFromLocalizedNumerals,
+    formatAmountToLocalizedNumeralsWithoutDigitGrouping,
+    formatNumberToLocalizedNumerals,
     getAmountPrependAndAppendText
 } = useI18n();
 
@@ -124,7 +124,7 @@ const {
     currentValue,
     onKeyUpDown,
     onPaste
-} = useCommonNumberInputBase(props, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmount, getFormattedValue, getValidFormattedValue);
+} = useCommonNumberInputBase(props, DEFAULT_DECIMAL_NUMBER_COUNT, getInitedFormattedValue(props.modelValue, props.flipNegative), parseAmountFromLocalizedNumerals, getFormattedValue, getValidFormattedValue);
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
 
@@ -135,7 +135,7 @@ const rules = [
         }
 
         try {
-            const val = parseAmount(v);
+            const val = parseAmountFromLocalizedNumerals(v);
 
             if (Number.isNaN(val) || !Number.isFinite(val)) {
                 return tt('Amount value is not number');
@@ -205,6 +205,7 @@ function enterFormulaMode(): void {
 
 function calculateFormula(): void {
     const systemDecimalSeparator = DecimalSeparator.Dot.symbol;
+    const numeralSystem = getCurrentNumeralSystemType();
     const decimalSeparator = getCurrentDecimalSeparator();
     let finalFormula = currentFormula.value;
 
@@ -215,12 +216,13 @@ function calculateFormula(): void {
         finalFormula = replaceAll(currentFormula.value, decimalSeparator, systemDecimalSeparator);
     }
 
+    finalFormula = numeralSystem.replaceLocalizedDigitsToWesternArabicDigits(finalFormula);
     const calculatedValue = evaluateExpression(finalFormula);
 
     if (isNumber(calculatedValue)) {
-        const textualValue = formatNumber(calculatedValue, 2);
+        const textualValue = formatNumberToLocalizedNumerals(calculatedValue, 2);
         const hasDecimalSeparator = textualValue.indexOf(decimalSeparator) >= 0;
-        currentValue.value = getValidFormattedValue(calculatedValue, textualValue, hasDecimalSeparator);
+        currentValue.value = getValidFormattedValue(calculatedValue * 100, textualValue, hasDecimalSeparator);
         formulaMode.value = false;
     } else {
         snackbar.value?.showMessage('Formula is invalid');
@@ -273,33 +275,36 @@ function getInitedFormattedValue(value: number, flipNegative?: boolean): string
 }
 
 function getFormattedValue(value: number): string {
+    const numeralSystem = getCurrentNumeralSystemType();
+
     if (!Number.isNaN(value) && Number.isFinite(value)) {
-        const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
-        return removeAll(formatAmount(value, props.currency), digitGroupingSymbol);
+        return formatAmountToLocalizedNumeralsWithoutDigitGrouping(value, props.currency);
     }
 
-    return '0';
+    return numeralSystem.digitZero;
 }
 
 function getDisplayCurrencyPrependAndAppendText(): CurrencyPrependAndAppendText | null {
-    const numericCurrentValue = parseAmount(currentValue.value);
+    const numericCurrentValue = parseAmountFromLocalizedNumerals(currentValue.value);
     const isPlural = numericCurrentValue !== 100 && numericCurrentValue !== -100;
 
     return getAmountPrependAndAppendText(props.currency, isPlural);
 }
 
 watch(() => props.currency, () => {
+    const numeralSystem = getCurrentNumeralSystemType();
     const newStringValue = getInitedFormattedValue(props.modelValue, props.flipNegative);
 
-    if (!(newStringValue === '0' && currentValue.value === '')) {
+    if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) {
         currentValue.value = newStringValue;
     }
 });
 
 watch(() => props.flipNegative, (newValue) => {
+    const numeralSystem = getCurrentNumeralSystemType();
     const newStringValue = getInitedFormattedValue(props.modelValue, newValue);
 
-    if (!(newStringValue === '0' && currentValue.value === '')) {
+    if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) {
         currentValue.value = newStringValue;
     }
 });
@@ -309,36 +314,55 @@ watch(() => props.modelValue, (newValue) => {
         newValue = -newValue;
     }
 
-    const numericCurrentValue = parseAmount(currentValue.value);
+    const numeralSystem = getCurrentNumeralSystemType();
+    const numericCurrentValue = parseAmountFromLocalizedNumerals(currentValue.value);
 
     if (newValue !== numericCurrentValue) {
         const newStringValue = getFormattedValue(newValue);
 
-        if (!(newStringValue === '0' && currentValue.value === '')) {
+        if (!(newStringValue === numeralSystem.digitZero && currentValue.value === '')) {
             currentValue.value = newStringValue;
         }
     }
 });
 
 watch(currentValue, (newValue) => {
+    const numeralSystem = getCurrentNumeralSystemType();
+    let actualNumeralSystem: NumeralSystem | undefined = undefined;
     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;
+        if (newValue[0] === '-' || newValue[0] === decimalSeparator) {
+            actualNumeralSystem = NumeralSystem.detect(newValue[1]);
+        } else {
+            actualNumeralSystem = NumeralSystem.detect(newValue[0]);
+        }
+
+        if (actualNumeralSystem && (actualNumeralSystem.type === NumeralSystem.WesternArabicNumerals.type || actualNumeralSystem.type === numeralSystem.type)) {
+            for (let i = 0; i < newValue.length; i++) {
+                if (!NumeralSystem.WesternArabicNumerals.isDigit(newValue[i]) && !numeralSystem.isDigit(newValue[i]) && newValue[i] !== '-' && newValue[i] !== decimalSeparator) {
+                    break;
+                }
+
+                finalValue += newValue[i];
             }
 
-            finalValue += newValue[i];
+            finalValue = numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalValue);
+        } else if (newValue === '-' || newValue === decimalSeparator || newValue === `-${decimalSeparator}`) {
+            finalValue = newValue;
         }
     }
 
     if (finalValue !== newValue) {
         currentValue.value = finalValue;
     } else {
-        let value: number = parseAmount(finalValue);
+        let value: number = parseAmountFromLocalizedNumerals(finalValue);
+
+        if (Number.isNaN(value) || !Number.isFinite(value)) {
+            value = 0;
+        }
 
         if (props.flipNegative) {
             value = -value;

src/components/desktop/MonthlyTrendsChart.vue

@@ -25,9 +25,6 @@ import {
     isArray,
     isNumber
 } from '@/lib/common.ts';
-import {
-    formatAmount
-} from '@/lib/numeral.ts';
 import {
     getYearMonthFirstUnixTime,
     getYearMonthLastUnixTime,
@@ -73,7 +70,16 @@ const emit = defineEmits<{
 }>();
 
 const theme = useTheme();
-const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n();
+
+const { tt,
+    formatUnixTimeToShortYear,
+    formatYearQuarter,
+    formatUnixTimeToShortYearMonth,
+    formatUnixTimeToFiscalYear,
+    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
+    formatAmountToLocalizedNumeralsWithCurrency
+} = useI18n();
+
 const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
 
 const userStore = useUserStore();
@@ -252,8 +258,8 @@ const yAxisWidth = computed<number>(() => {
         }
     }
 
-    const maxValueText = formatAmountWithCurrency(maxValue, props.defaultCurrency);
-    const minValueText = formatAmountWithCurrency(minValue, props.defaultCurrency);
+    const maxValueText = formatAmountToLocalizedNumeralsWithCurrency(maxValue, props.defaultCurrency);
+    const minValueText = formatAmountToLocalizedNumeralsWithCurrency(minValue, props.defaultCurrency);
     const maxLengthText = maxValueText.length > minValueText.length ? maxValueText : minValueText;
 
     const canvas = document.createElement('canvas');
@@ -319,7 +325,7 @@ const chartOptions = computed<object>(() => {
                     const item = displayItems[i];
 
                     if (displayItems.length === 1 || item.totalAmount !== 0) {
-                        const value = formatAmountWithCurrency(item.totalAmount, props.defaultCurrency);
+                        const value = formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, props.defaultCurrency);
                         tooltip += '<div><span class="chart-pointer" style="background-color: ' + item.color + '"></span>';
                         tooltip += `<span>${item.name}</span><span style="margin-left: 20px; float: right">${value}</span><br/>`;
                         tooltip += '</div>';
@@ -327,7 +333,7 @@ const chartOptions = computed<object>(() => {
                 }
 
                 if (props.showTotalAmountInTooltip) {
-                    const displayTotalAmount = formatAmountWithCurrency(totalAmount, props.defaultCurrency);
+                    const displayTotalAmount = formatAmountToLocalizedNumeralsWithCurrency(totalAmount, props.defaultCurrency);
                     tooltip = '<div style="border-bottom: ' + (isDarkMode.value ? '#eee' : '#333') + ' dashed 1px">'
                         + '<span class="chart-pointer" style="background-color: ' + (isDarkMode.value ? '#eee' : '#333') + '"></span>'
                         + `<span>${tt('Total Amount')}</span><span style="margin-left: 20px; float: right">${displayTotalAmount}</span><br/>`
@@ -367,13 +373,13 @@ const chartOptions = computed<object>(() => {
                 type: 'value',
                 axisLabel: {
                     formatter: (value: string) => {
-                        return formatAmountWithCurrency(value, props.defaultCurrency);
+                        return formatAmountToLocalizedNumeralsWithCurrency(parseInt(value), props.defaultCurrency);
                     }
                 },
                 axisPointer: {
                     label: {
                         formatter: (params: CallbackDataParams) => {
-                            return formatAmountWithCurrency(Math.floor(params.value as number), props.defaultCurrency);
+                            return formatAmountToLocalizedNumeralsWithCurrency(Math.floor(params.value as number), props.defaultCurrency);
                         }
                     }
                 },
@@ -443,7 +449,7 @@ function exportData(): { headers: string[], data: string[][] } {
     for (let i = 0; i < allDisplayDateRanges.value.length; i++) {
         const row: string[] = [];
         row.push(allDisplayDateRanges.value[i]);
-        row.push(...allSeries.value.map(item => formatAmount(item.data[i], {})));
+        row.push(...allSeries.value.map(item => formatAmountToWesternArabicNumeralsWithoutDigitGrouping(item.data[i])));
         data.push(row);
     }
 

src/components/desktop/PieChart.vue

@@ -32,7 +32,7 @@ const emit = defineEmits<{
 
 const theme = useTheme();
 
-const { formatAmountWithCurrency } = useI18n();
+const { formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
 const { selectedIndex, validItems } = usePieChartBase(props);
 
 const selectedLegends = ref<Record<string, boolean> | null>(null);
@@ -133,7 +133,7 @@ const chartOptions = computed<object>(() => {
             formatter: (params: CallbackDataParams) => {
                 const dataItem = params.data as DesktopPieChartDataItem;
                 const name = dataItem ? dataItem.displayName : '';
-                const value = dataItem ? dataItem.displayValue : formatAmountWithCurrency(params.value as number);
+                const value = dataItem ? dataItem.displayValue : formatAmountToLocalizedNumeralsWithCurrency(params.value as number);
                 let percent = dataItem ? dataItem.displayPercent : (params.percent + '%');
 
                 if (hasUnselectedItem.value) {

src/components/mobile/AccountBalanceTrendsBarChart.vue

@@ -28,7 +28,7 @@
                           :style="`top: ${virtualDataItems.topPosition}px`"
                           :virtual-list-index="item.index"
                           :title="item.displayDate"
-                          :after="formatAmountWithCurrency(item.closingBalance, account.currency)"
+                          :after="formatAmountToLocalizedNumeralsWithCurrency(item.closingBalance, account.currency)"
                           v-for="item in virtualDataItems.items"
             >
                 <template #media>
@@ -80,7 +80,7 @@ interface MobileAccountBalanceTrendsChartVirtualListData {
 
 const props = defineProps<MobileAccountBalanceTrendsChartProps>();
 
-const { tt, formatAmountWithCurrency } = useI18n();
+const { tt, formatAmountToLocalizedNumeralsWithCurrency } = useI18n();
 const { allDataItems } = useAccountBalanceTrendsChartBase(props);
 
 const virtualDataItems = ref<MobileAccountBalanceTrendsChartVirtualListData>({

src/components/mobile/MonthlyTrendsBarChart.vue

@@ -64,7 +64,7 @@
             </template>
 
             <template #after>
-                <span>{{ formatAmountWithCurrency(item.totalAmount, defaultCurrency) }}</span>
+                <span>{{ formatAmountToLocalizedNumeralsWithCurrency(item.totalAmount, defaultCurrency) }}</span>
             </template>
 
             <template #inner-end>
@@ -148,7 +148,15 @@ const emit = defineEmits<{
     (e: 'click', value: MonthlyTrendsBarChartClickEvent): void;
 }>();
 
-const { tt, formatUnixTimeToShortYear, formatYearQuarter, formatUnixTimeToShortYearMonth, formatUnixTimeToFiscalYear, formatAmountWithCurrency } = useI18n();
+const {
+    tt,
+    formatUnixTimeToShortYear,
+    formatYearQuarter,
+    formatUnixTimeToShortYearMonth,
+    formatUnixTimeToFiscalYear,
+    formatAmountToLocalizedNumeralsWithCurrency
+} = useI18n();
+
 const { allDateRanges, getItemName, getColor } = useMonthlyTrendsChartBase(props);
 
 const userStore = useUserStore();

src/components/mobile/NumberPadSheet.vue

@@ -11,37 +11,37 @@
             </div>
             <div class="numpad-buttons">
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(7)">
-                    <span class="numpad-button-text numpad-button-text-normal">7</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[7] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(8)">
-                    <span class="numpad-button-text numpad-button-text-normal">8</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[8] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(9)">
-                    <span class="numpad-button-text numpad-button-text-normal">9</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[9] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-function no-right-border" @click="setSymbol('×')">
                     <span class="numpad-button-text numpad-button-text-normal">&times;</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(4)">
-                    <span class="numpad-button-text numpad-button-text-normal">4</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[4] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(5)">
-                    <span class="numpad-button-text numpad-button-text-normal">5</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[5] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(6)">
-                    <span class="numpad-button-text numpad-button-text-normal">6</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[6] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-function no-right-border" @click="setSymbol('−')">
                     <span class="numpad-button-text numpad-button-text-normal">&minus;</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(1)">
-                    <span class="numpad-button-text numpad-button-text-normal">1</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[1] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(2)">
-                    <span class="numpad-button-text numpad-button-text-normal">2</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[2] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(3)">
-                    <span class="numpad-button-text numpad-button-text-normal">3</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[3] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-function no-right-border" @click="setSymbol('+')">
                     <span class="numpad-button-text numpad-button-text-normal">&plus;</span>
@@ -50,10 +50,10 @@
                     <span class="numpad-button-text numpad-button-text-normal">{{ decimalSeparator }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" v-if="!supportDecimalSeparator" @click="inputDoubleNum(0)">
-                    <span class="numpad-button-text numpad-button-text-normal">00</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[0] + digits[0] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="inputNum(0)">
-                    <span class="numpad-button-text numpad-button-text-normal">0</span>
+                    <span class="numpad-button-text numpad-button-text-normal">{{ digits[0] }}</span>
                 </f7-button>
                 <f7-button class="numpad-button numpad-button-num" @click="backspace" @taphold="clear()">
                 <span class="numpad-button-text numpad-button-text-normal">
@@ -74,8 +74,9 @@ import { ref, computed, watch } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 
+import { NumeralSystem } from '@/core/numeral.ts';
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
-import { isString, isNumber, removeAll } from '@/lib/common.ts';
+import { isNumber } from '@/lib/common.ts';
 
 const props = defineProps<{
     modelValue: number;
@@ -94,11 +95,12 @@ const emit = defineEmits<{
 
 const {
     tt,
+    getAllLocalizedDigits,
+    getCurrentNumeralSystemType,
     getCurrentDecimalSeparator,
-    getCurrentDigitGroupingSymbol,
-    appendDigitGroupingSymbol,
-    parseAmount,
-    formatAmount
+    parseAmountFromWesternArabicNumerals,
+    formatAmountToWesternArabicNumeralsWithoutDigitGrouping,
+    appendDigitGroupingSymbolAndDecimalSeparator
 } = useI18n();
 const { showToast } = useI18nUIComponents();
 
@@ -106,6 +108,7 @@ const previousValue = ref<string>('');
 const currentSymbol = ref<string>('');
 const currentValue = ref<string>(getInitedStringValue(props.modelValue, props.flipNegative));
 
+const digits = computed<string[]>(() => getAllLocalizedDigits());
 const decimalSeparator = computed<string>(() => getCurrentDecimalSeparator());
 
 const supportDecimalSeparator = computed<boolean>(() => {
@@ -117,8 +120,21 @@ const supportDecimalSeparator = computed<boolean>(() => {
 });
 
 const currentDisplay = computed<string>(() => {
-    const finalPreviousValue = appendDigitGroupingSymbol(previousValue.value);
-    const finalCurrentValue = appendDigitGroupingSymbol(currentValue.value);
+    const numeralSystem = getCurrentNumeralSystemType();
+    const finalPreviousValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(previousValue.value));
+    let finalCurrentValue = currentValue.value;
+    let currentValueSuffix = '';
+
+    if (finalCurrentValue && finalCurrentValue[finalCurrentValue.length - 1] === decimalSeparator.value) {
+        finalCurrentValue = finalCurrentValue.substring(0, finalCurrentValue.length - 1);
+        currentValueSuffix = decimalSeparator.value;
+    }
+
+    finalCurrentValue = appendDigitGroupingSymbolAndDecimalSeparator(numeralSystem.replaceWesternArabicDigitsToLocalizedDigits(finalCurrentValue));
+
+    if (currentValueSuffix) {
+        finalCurrentValue += currentValueSuffix;
+    }
 
     if (currentSymbol.value) {
         return `${finalPreviousValue} ${currentSymbol.value} ${finalCurrentValue}`;
@@ -150,45 +166,39 @@ function getInitedStringValue(value: number, flipNegative?: boolean): string {
         value = -value;
     }
 
-    return getStringValue(value);
+    return getStringValue(value, true);
 }
 
-function getStringValue(value: number | string): string {
-    if (!isNumber(value) && !isString(value)) {
+function getStringValue(value: number, hideZero: boolean): string {
+    if (!isNumber(value)) {
         return '';
     }
 
-    let str = formatAmount(value, props.currency);
-
-    const digitGroupingSymbol = getCurrentDigitGroupingSymbol();
-
-    if (str.indexOf(digitGroupingSymbol) >= 0) {
-        str = removeAll(str, digitGroupingSymbol);
-    }
+    const textualNumber = formatAmountToWesternArabicNumeralsWithoutDigitGrouping(value, props.currency);
 
     const decimalSeparator = getCurrentDecimalSeparator();
-    const decimalSeparatorPos = str.indexOf(decimalSeparator);
+    const decimalSeparatorPos = textualNumber.indexOf(decimalSeparator);
 
     if (decimalSeparatorPos < 0) {
-        if (str === '0') {
+        if (hideZero && textualNumber === NumeralSystem.WesternArabicNumerals.digitZero) {
             return '';
         }
 
-        return str;
+        return textualNumber;
     }
 
-    const integer = str.substring(0, decimalSeparatorPos);
-    const decimals = str.substring(decimalSeparatorPos + 1, str.length);
+    const integer = textualNumber.substring(0, decimalSeparatorPos);
+    const decimals = textualNumber.substring(decimalSeparatorPos + 1, textualNumber.length);
     let newDecimals = '';
 
     for (let i = decimals.length - 1; i >= 0; i--) {
-        if (decimals[i] !== '0' || newDecimals.length > 0) {
+        if (decimals[i] !== NumeralSystem.WesternArabicNumerals.digitZero || newDecimals.length > 0) {
             newDecimals = decimals[i] + newDecimals;
         }
     }
 
     if (newDecimals.length < 1) {
-        if (integer === '0') {
+        if (hideZero && integer === NumeralSystem.WesternArabicNumerals.digitZero) {
             return '';
         }
 
@@ -204,10 +214,10 @@ function inputNum(num: number): void {
         currentSymbol.value = '';
     }
 
-    if (currentValue.value === '0') {
+    if (currentValue.value === NumeralSystem.WesternArabicNumerals.digitZero) {
         currentValue.value = num.toString();
         return;
-    } else if (currentValue.value === '-0') {
+    } else if (currentValue.value === `-${NumeralSystem.WesternArabicNumerals.digitZero}`) {
         currentValue.value = '-' + num.toString();
         return;
     }
@@ -221,7 +231,7 @@ function inputNum(num: number): void {
     const newValue = currentValue.value + num.toString();
 
     if (isNumber(props.minValue)) {
-        const current = parseAmount(newValue);
+        const current = parseAmountFromWesternArabicNumerals(newValue);
 
         if (current < (props.minValue)) {
             return;
@@ -229,7 +239,7 @@ function inputNum(num: number): void {
     }
 
     if (isNumber(props.maxValue)) {
-        const current = parseAmount(newValue);
+        const current = parseAmountFromWesternArabicNumerals(newValue);
 
         if (current > (props.maxValue)) {
             return;
@@ -255,9 +265,9 @@ function inputDecimalSeparator(): void {
     }
 
     if (currentValue.value.length < 1) {
-        currentValue.value = '0';
+        currentValue.value = NumeralSystem.WesternArabicNumerals.digitZero;
     } else if (currentValue.value === '-') {
-        currentValue.value = '-0';
+        currentValue.value = '-' + NumeralSystem.WesternArabicNumerals.digitZero;
     }
 
     currentValue.value = currentValue.value + decimalSeparator.value;
@@ -302,8 +312,8 @@ function clear(): void {
 
 function confirm(): boolean {
     if (currentSymbol.value && currentValue.value.length >= 1) {
-        const previous = parseAmount(previousValue.value);
-        const current = parseAmount(currentValue.value);
+        const previous = parseAmountFromWesternArabicNumerals(previousValue.value);
+        const current = parseAmountFromWesternArabicNumerals(currentValue.value);
         let finalValue = 0;
 
         switch (currentSymbol.value) {
@@ -334,7 +344,7 @@ function confirm(): boolean {
             }
         }
 
-        currentValue.value = getStringValue(finalValue);
+        currentValue.value = getStringValue(finalValue, false);
         previousValue.value = '';
         currentSymbol.value = '';
 
@@ -346,7 +356,7 @@ function confirm(): boolean {
 
         return true;
     } else {
-        let value: number = parseAmount(currentValue.value);
+        let value: number = parseAmountFromWesternArabicNumerals(currentValue.value);
 
         if (props.flipNegative) {
             value = -value;