fix some numerals were not displayed according to the numerical system

src/components/base/DateTimeSelectionBase.ts

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 import { useI18n } from '@/locales/helpers.ts';
 
 import { type NameValue } from '@/core/base.ts';
+import { NumeralSystem } from '@/core/numeral.ts';
 
 export interface TimePickerValue {
     value: string;
@@ -12,6 +13,7 @@ export interface TimePickerValue {
 export function useDateTimeSelectionBase() {
     const {
         getAllMeridiemIndicators,
+        getCurrentNumeralSystemType,
         isLongTime24HourFormat,
         isLongTimeMeridiemIndicatorFirst,
         isLongTimeHourTwoDigits,
@@ -25,14 +27,17 @@ export function useDateTimeSelectionBase() {
     const isSecondTwoDigits = ref<boolean>(isLongTimeSecondTwoDigits());
     const isMeridiemIndicatorFirst = ref<boolean>(isLongTimeMeridiemIndicatorFirst() || false);
 
+    const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
     const meridiemItems = computed<NameValue[]>(() => getAllMeridiemIndicators());
 
     function getDisplayTimeValue(value: number, forceTwoDigits: boolean): string {
-        if (forceTwoDigits && value < 10) {
-            return `0${value}`;
-        } else {
-            return value.toString();
+        let textualValue = value.toString();
+
+        if (forceTwoDigits) {
+            textualValue = textualValue.padStart(2, NumeralSystem.WesternArabicNumerals.digitZero);
         }
+
+        return numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(textualValue);
     }
 
     function generateAllHours(count: number, forceTwoDigits: boolean): TimePickerValue[] {
@@ -43,7 +48,7 @@ export function useDateTimeSelectionBase() {
         for (let i = 0; i < count; i++) {
             if (!is24Hour.value) {
                 ret.push({
-                    value: '12',
+                    value: getDisplayTimeValue(12, forceTwoDigits),
                     itemsIndex: i
                 });
             }

src/components/desktop/PaginationButtons.vue

@@ -13,7 +13,7 @@
                    @click="currentPage = parseInt(page)"
                    v-if="page !== '...'"
             >
-                <span>{{ page }}</span>
+                <span>{{ getDisplayPage(page) }}</span>
             </v-btn>
             <v-btn variant="text"
                    color="default"
@@ -31,8 +31,8 @@
                         <v-list-item class="text-sm" :density="density">
                             <v-list-item-title class="cursor-pointer">
                                 <v-autocomplete width="100"
-                                                item-title="page"
-                                                item-value="page"
+                                                item-title="name"
+                                                item-value="value"
                                                 auto-select-first="exact"
                                                 :density="density"
                                                 :items="allPages"
@@ -52,6 +52,8 @@ import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
+import type { NameNumeralValue } from '@/core/base.ts';
+import type { NumeralSystem } from '@/core/numeral.ts';
 import type { ComponentDensity } from '@/lib/ui/desktop.ts';
 
 const props = defineProps<{
@@ -66,17 +68,21 @@ const emit = defineEmits<{
     (e: 'update:modelValue', value: number): void;
 }>();
 
-const { tt } = useI18n();
+const { tt, getCurrentNumeralSystemType } = useI18n();
 
 const showMenus = ref<Record<string, boolean>>({});
 
-const allPages = computed<{ page: number }[]>(() => {
-    const pages = [];
+const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
+
+function getDisplayPage(page: number | string): string {
+    return numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(page.toString());
+}
+
+const allPages = computed<NameNumeralValue[]>(() => {
+    const pages: NameNumeralValue[] = [];
 
     for (let i = 1; i <= props.totalPageCount; i++) {
-        pages.push({
-            page: i
-        });
+        pages.push({ value: i, name: getDisplayPage(i) });
     }
 
     return pages;

src/components/desktop/StepsBar.vue

@@ -10,7 +10,7 @@
                         <div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
                             <div class="slide-group-stepper-indicator"></div>
                         </div>
-                        <h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
+                        <h4 class="text-h4 step-number">{{ getDisplayStep(idx + 1) }}</h4>
                     </div>
                     <div style="line-height: 0;">
                         <h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
@@ -31,7 +31,7 @@
                         <div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
                             <div class="slide-group-stepper-indicator"></div>
                         </div>
-                        <h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
+                        <h4 class="text-h4 step-number">{{ getDisplayStep(idx + 1) }}</h4>
                     </div>
                     <div style="line-height: 0;">
                         <h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
@@ -46,6 +46,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
+import { useI18n } from '@/locales/helpers.ts';
+
+import { NumeralSystem } from '@/core/numeral.ts';
+
 export interface StepBarItem {
     name: string;
     title: string;
@@ -63,8 +67,15 @@ const emit = defineEmits<{
     (e: 'step:change', stepName: string): void;
 }>();
 
+const { getCurrentNumeralSystemType } = useI18n();
+
+const numeralSystem = computed<NumeralSystem>(() => getCurrentNumeralSystemType());
 const isClickable = computed<boolean>(() => props.clickable !== 'false' && props.clickable !== false);
 
+function getDisplayStep(index: number): string {
+    return numeralSystem.value.replaceWesternArabicDigitsToLocalizedDigits(index.toString().padStart(2, NumeralSystem.WesternArabicNumerals.digitZero));
+}
+
 function changeStep(step: StepBarItem): void {
     if (isClickable.value) {
         emit('step:change', step.name);