mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 23:47:33 +08:00
migrate i18n helper.js some code to typescript and migrate vue file to composition API and typescript
This commit is contained in:
@@ -11,7 +11,7 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, computed, useTemplateRef } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helper.js';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { copyObjectTo } from '@/lib/common.ts';
|
||||
import type { MapInstance, MapPosition } from '@/lib/map/base.ts';
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
<v-card-text v-if="textContent" class="pa-4 pb-6">{{ textContent }}</v-card-text>
|
||||
<v-card-actions class="px-4 pb-4">
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="gray" @click="cancel">{{ $t('Cancel') }}</v-btn>
|
||||
<v-btn :color="finalColor" @click="confirm">{{ $t('OK') }}</v-btn>
|
||||
<v-btn color="gray" @click="cancel">{{ tt('Cancel') }}</v-btn>
|
||||
<v-btn :color="finalColor" @click="confirm">{{ tt('OK') }}</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
@@ -17,7 +17,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, watch } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helper.js';
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { isString } from '@/lib/common.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -46,7 +47,7 @@ function open(titleOrText: string, textOrOptions: string | Record<string, unknow
|
||||
|
||||
if (isString(textOrOptions)) { // second parameter is text
|
||||
titleContent.value = tt(titleOrText, options);
|
||||
textContent.value = tt(textOrOptions, options);
|
||||
textContent.value = tt(textOrOptions as string, options);
|
||||
} else { // second parameter is options
|
||||
const actualOptions = textOrOptions as Record<string, unknown>;
|
||||
titleContent.value = tt('global.app.title');
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{{ messageContent }}
|
||||
|
||||
<template #actions>
|
||||
<v-btn color="primary" variant="text" @click="showState = false">{{ $t('Close') }}</v-btn>
|
||||
<v-btn color="primary" variant="text" @click="showState = false">{{ tt('Close') }}</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
@@ -11,8 +11,9 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, watch } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { isObject } from '@/lib/common.ts';
|
||||
import { useI18n } from '@/locales/helper.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:show', value: boolean): void
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<v-card class="pa-2 pa-sm-4 pa-md-4">
|
||||
<template #title>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<h4 class="text-h4">{{ $t('Use on Mobile Device') }}</h4>
|
||||
<h4 class="text-h4">{{ tt('Use on Mobile Device') }}</h4>
|
||||
</div>
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<div class="text-body-1 text-center text-wrap mt-4">{{ $t('You can scan the QR code below on your mobile device.') }}</div>
|
||||
<div class="text-body-1 text-center text-wrap mt-4">{{ tt('You can scan the QR code below on your mobile device.') }}</div>
|
||||
</template>
|
||||
<v-card-text class="mb-md-4">
|
||||
<v-row>
|
||||
@@ -20,8 +20,8 @@
|
||||
</v-card-text>
|
||||
<v-card-text class="overflow-y-visible">
|
||||
<div class="w-100 d-flex justify-center gap-4">
|
||||
<v-btn :href="mobileVersionPath">{{$t('Switch to Mobile Version') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ $t('Close') }}</v-btn>
|
||||
<v-btn :href="mobileVersionPath">{{ tt('Switch to Mobile Version') }}</v-btn>
|
||||
<v-btn color="secondary" variant="tonal" @click="showState = false">{{ tt('Close') }}</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@@ -31,6 +31,8 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { getMobileUrlQrCodePath } from '@/lib/qrcode.ts';
|
||||
import { getMobileVersionPath } from '@/lib/version.ts';
|
||||
|
||||
@@ -42,6 +44,8 @@ const emit = defineEmits<{
|
||||
(e: 'update:show', value: boolean): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const mobileUrlQrCodePath = getMobileUrlQrCodePath();
|
||||
const mobileVersionPath = getMobileVersionPath();
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="swipe-handler"></div>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<f7-link sheet-close :text="$t('Done')"></f7-link>
|
||||
<f7-link sheet-close :text="tt('Done')"></f7-link>
|
||||
</div>
|
||||
</f7-toolbar>
|
||||
<f7-page-content>
|
||||
@@ -31,6 +31,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import type { ColorValue, ColorInfo } from '@/core/color.ts';
|
||||
import { arrayContainsFieldValue } from '@/lib/common.ts';
|
||||
import { getColorsInRows } from '@/lib/color.ts';
|
||||
@@ -48,6 +50,8 @@ const emit = defineEmits<{
|
||||
(e: 'update:show', value: boolean): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const currentValue: Ref<ColorValue> = ref(props.modelValue);
|
||||
const itemPerRow: Ref<number> = ref(props.columnCount || 7);
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<div class="swipe-handler"></div>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<f7-link sheet-close :text="$t('Done')"></f7-link>
|
||||
<f7-link sheet-close :text="tt('Done')"></f7-link>
|
||||
</div>
|
||||
</f7-toolbar>
|
||||
<f7-page-content>
|
||||
@@ -31,6 +31,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
|
||||
import { arrayContainsFieldValue } from '@/lib/common.ts';
|
||||
import { getIconsInRows } from '@/lib/icon.ts';
|
||||
@@ -49,6 +51,8 @@ const emit = defineEmits<{
|
||||
(e: 'update:show', value: boolean): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const currentValue: Ref<string> = ref(props.modelValue);
|
||||
const itemPerRow: Ref<number> = ref(props.columnCount || 7);
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
</p>
|
||||
<textarea class="information-content full-line" readonly="readonly" :rows="rowCount" :value="information"></textarea>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="close" :text="$t('Close')"></f7-link>
|
||||
<f7-link @click="close" :text="tt('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
@@ -27,6 +27,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useTemplateRef, watch, onMounted, onUpdated } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { ClipboardHolder } from '@/lib/clipboard.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -43,6 +45,8 @@ const emit = defineEmits<{
|
||||
(e: 'info:copied'): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const iconCopyToClipboard = useTemplateRef('copyToClipboardIcon');
|
||||
|
||||
let clipboardHolder: ClipboardHolder | null = null;
|
||||
|
||||
@@ -5,23 +5,23 @@
|
||||
<div class="swipe-handler"></div>
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<f7-link :text="$t('Done')" @click="save"></f7-link>
|
||||
<f7-link :text="tt('Done')" @click="save"></f7-link>
|
||||
</div>
|
||||
</f7-toolbar>
|
||||
<f7-page-content class="no-margin-vertical no-padding-vertical">
|
||||
<map-view ref="map" height="400px" :geo-location="geoLocation">
|
||||
<template #error-title="{ mapSupported, mapDependencyLoaded }">
|
||||
<div class="display-flex padding justify-content-space-between align-items-center">
|
||||
<div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ $t('Unsupported Map Provider') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ $t('Cannot Initialize Map') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-if="!mapSupported"><b>{{ tt('Unsupported Map Provider') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-else-if="!mapDependencyLoaded"><b>{{ tt('Cannot Initialize Map') }}</b></div>
|
||||
<div class="ebk-sheet-title" v-else></div>
|
||||
</div>
|
||||
</template>
|
||||
<template #error-content>
|
||||
<div class="padding-horizontal padding-bottom">
|
||||
<p class="no-margin">{{ $t('Please refresh the page and try again. If the error persists, ensure that the server\'s map settings are correctly configured.') }}</p>
|
||||
<p class="no-margin">{{ tt('Please refresh the page and try again. If the error persists, ensure that the server\'s map settings are correctly configured.') }}</p>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="close" :text="$t('Close')"></f7-link>
|
||||
<f7-link @click="close" :text="tt('Close')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -34,6 +34,8 @@
|
||||
import { computed, useTemplateRef } from 'vue';
|
||||
import MapView from '@/components/common/MapView.vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import type { MapPosition } from '@/lib/map/base.ts';
|
||||
|
||||
type MapViewType = InstanceType<typeof MapView>;
|
||||
@@ -48,6 +50,8 @@ const emit = defineEmits<{
|
||||
(e: 'update:show', value: boolean): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const map = useTemplateRef<MapViewType>('map');
|
||||
|
||||
const geoLocation = computed<MapPosition | undefined>({
|
||||
|
||||
@@ -17,19 +17,19 @@
|
||||
floating-label
|
||||
clear-button
|
||||
class="no-margin no-padding-bottom"
|
||||
:label="$t('Passcode')"
|
||||
:placeholder="$t('Passcode')"
|
||||
:label="tt('Passcode')"
|
||||
:placeholder="tt('Passcode')"
|
||||
v-model:value="currentPasscode"
|
||||
@keyup.enter="confirm()"
|
||||
></f7-list-input>
|
||||
</f7-list>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPasscode || confirmDisabled }"
|
||||
:text="$t('Continue')"
|
||||
:text="tt('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="tt('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
@@ -39,6 +39,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
title?: string
|
||||
@@ -54,6 +56,8 @@ const emit = defineEmits<{
|
||||
(e: 'passcode:confirm', value: string): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const currentPasscode: Ref<string> = ref('');
|
||||
|
||||
function confirm() {
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
clear-button
|
||||
class="no-margin no-padding-bottom"
|
||||
:class="color ? 'color-' + color : ''"
|
||||
:label="$t('Current Password')"
|
||||
:placeholder="$t('Current Password')"
|
||||
:label="tt('Current Password')"
|
||||
:placeholder="tt('Current Password')"
|
||||
v-model:value="currentPassword"
|
||||
@keyup.enter="confirm()"
|
||||
></f7-list-input>
|
||||
@@ -26,11 +26,11 @@
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPassword || confirmDisabled }"
|
||||
:color="color || 'primary'"
|
||||
:text="$t('Continue')"
|
||||
:text="tt('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
<f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="tt('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
@@ -40,6 +40,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
title?: string
|
||||
@@ -56,6 +58,8 @@ const emit = defineEmits<{
|
||||
(e: 'password:confirm', value: string): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const currentPassword: Ref<string> = ref('');
|
||||
|
||||
function confirm() {
|
||||
|
||||
@@ -15,11 +15,11 @@
|
||||
</f7-list>
|
||||
<f7-button large fill
|
||||
:class="{ 'disabled': !currentPinCodeValid || confirmDisabled }"
|
||||
:text="$t('Continue')"
|
||||
:text="tt('Continue')"
|
||||
@click="confirm">
|
||||
</f7-button>
|
||||
<div class="margin-top text-align-center">
|
||||
<f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
|
||||
<f7-link @click="cancel" :text="tt('Cancel')"></f7-link>
|
||||
</div>
|
||||
</div>
|
||||
</f7-page-content>
|
||||
@@ -29,6 +29,8 @@
|
||||
<script setup lang="ts">
|
||||
import { type Ref, ref, computed } from 'vue';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
title?: string
|
||||
@@ -44,6 +46,8 @@ const emit = defineEmits<{
|
||||
(e: 'pincode:confirm', value: string): void
|
||||
}>();
|
||||
|
||||
const { tt } = useI18n();
|
||||
|
||||
const currentPinCode: Ref<string> = ref('');
|
||||
|
||||
const currentPinCodeValid = computed<boolean>(() => {
|
||||
|
||||
Reference in New Issue
Block a user