refactor: support i18n in frontend
This commit is contained in:
@@ -19,7 +19,7 @@ import {
|
||||
dayOfWeek,
|
||||
isLeapYear,
|
||||
} from '@/utils/datetime';
|
||||
import { MONTH_NAMES, WEEK_NAMES, universalGetMonth } from '@/utils/i18n';
|
||||
import { i18n, universalGetMonth } from '@/utils/i18n';
|
||||
|
||||
// region: Constants
|
||||
|
||||
@@ -121,11 +121,11 @@ const isHourTab = computed<boolean>(() => currentTab.value === TabType.Hour);
|
||||
const isMinuteTab = computed<boolean>(() => currentTab.value === TabType.Minute);
|
||||
|
||||
const tabLabel = (t: TabType): string => {
|
||||
if (t === TabType.Year) return 'Year';
|
||||
if (t === TabType.Month) return 'Month';
|
||||
if (t === TabType.Day) return 'Day';
|
||||
if (t === TabType.Hour) return 'Hour';
|
||||
return 'Minute';
|
||||
if (t === TabType.Year) return i18n.global.t('universal-text-year');
|
||||
if (t === TabType.Month) return i18n.global.t('universal-text-month');
|
||||
if (t === TabType.Day) return i18n.global.t('universal-text-day');
|
||||
if (t === TabType.Hour) return i18n.global.t('universal-text-hour');
|
||||
return i18n.global.t('universal-text-minute');
|
||||
}
|
||||
|
||||
const headerValue = (t: TabType): number => {
|
||||
@@ -200,9 +200,9 @@ interface MonthCell {
|
||||
const monthCells = computed<MonthCell[]>(() => {
|
||||
const sameYear = displayCacheDateTime.value.getFullYear() === internalDateTime.value.getFullYear();
|
||||
const pickedMonth = internalDateTime.value.getMonth();
|
||||
return MONTH_NAMES.map((name, idx) => ({
|
||||
return Array.from({ length: 12 }, (_, idx) => ({
|
||||
idx,
|
||||
name,
|
||||
name: universalGetMonth(idx),
|
||||
picked: sameYear && idx === pickedMonth,
|
||||
}));
|
||||
})
|
||||
@@ -551,7 +551,7 @@ watch(currentTab, (t) => {
|
||||
</nav>
|
||||
<div class="perfectTable">
|
||||
<div>
|
||||
<div v-for="(w, i) in WEEK_NAMES" :key="i">{{ w }}</div>
|
||||
<div v-for="i in 7" :key="i">{{ $t('universal-week-' + i) }}</div>
|
||||
</div>
|
||||
<div v-for="(row, ri) in dayRows" :key="ri">
|
||||
<div v-for="(cell, ci) in row" :key="ci" :class="{ picked: cell.picked }" @click="clickDay(cell)">
|
||||
@@ -587,8 +587,8 @@ watch(currentTab, (t) => {
|
||||
</div>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<a class="button is-success" @click="confirm"><span>OK</span></a>
|
||||
<a class="button" @click="cancel"><span>Cancel</span></a>
|
||||
<a class="button is-success" @click="confirm"><span>{{ $t('datetimepicker-confirm') }}</span></a>
|
||||
<a class="button" @click="cancel"><span>{{ $t('datetimepicker-cancel') }}</span></a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user