migrate snack bar to composition API and typescript

src/components/desktop/SnackBar.vue

@@ -8,43 +8,36 @@
     </v-snackbar>
 </template>
 
-<script>
+<script setup lang="ts">
-export default {
+import { type Ref, ref, watch } from 'vue';
-    props: [
-        'show',
-        'message'
-    ],
-    emits: [
-        'update:show'
-    ],
-    expose: [
-        'showMessage',
-        'showError'
-    ],
-    data() {
-        const self = this;
 
-        return {
+import { useI18n } from '@/lib/i18n.js';
-            showState: self.show,
+
-            messageContent: self.message,
+const emit = defineEmits<{
-            resolve: null,
+    (e: 'update:show', value: boolean): void
-            reject: null
+}>();
-        }
+
-    },
+const { tt, te } = useI18n();
-    watch: {
+
-        'showState': function (newValue) {
+const showState: Ref<boolean> = ref(false);
-            this.$emit('update:show', newValue);
+const messageContent: Ref<string> = ref('');
-        }
+
-    },
+function showMessage(message: string, options: Record<string, unknown>): void {
-    methods: {
+    showState.value = true;
-        showMessage(message, options) {
+    messageContent.value = tt(message, options);
-            this.showState = true;
-            this.messageContent = this.$t(message, options);
-        },
-        showError(error) {
-            this.showState = true;
-            this.messageContent = this.$tError(error.message || error);
-        }
-    }
 }
+
+function showError(error: string | { message: string }): void {
+    showState.value = true;
+    messageContent.value = te(error.message || error);
+}
+
+watch(showState, (newValue) => {
+    emit('update:show', newValue);
+});
+
+defineExpose({
+    showMessage,
+    showError
+});
 </script>

src/lib/i18n.js

@@ -1,8 +1,9 @@
+import { useI18n as useVueI18n } from 'vue-i18n';
 import moment from 'moment-timezone';
 
 import { defaultLanguage, allLanguages } from '@/locales/index.ts';
 
-import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRangeScene, DateRange, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE } from '@/core/datetime.ts';
+import { Month, WeekDay, MeridiemIndicator, LongDateFormat, ShortDateFormat, LongTimeFormat, ShortTimeFormat, DateRange, LANGUAGE_DEFAULT_DATE_TIME_FORMAT_VALUE } from '@/core/datetime.ts';
 import { TimezoneTypeForStatistics } from '@/core/timezone.ts';
 import { DecimalSeparator, DigitGroupingSymbol, DigitGroupingType } from '@/core/numeral.ts';
 import { CurrencyDisplayType, CurrencySortingType } from '@/core/currency.ts';
@@ -1747,8 +1748,16 @@ export function i18nFunctions(i18nGlobal) {
         getCategorizedAccountsWithDisplayBalance: (allVisibleAccounts, showAccountBalance, defaultCurrency, settingsStore, userStore, exchangeRatesStore) => getCategorizedAccountsWithDisplayBalance(allVisibleAccounts, showAccountBalance, defaultCurrency, userStore, settingsStore, exchangeRatesStore, i18nGlobal.t),
         getServerTipContent: (tipConfig) => getServerTipContent(tipConfig, i18nGlobal),
         joinMultiText: (textArray) => joinMultiText(textArray, i18nGlobal.t),
+        tt: (...args) => i18nGlobal.t(...args),
+        ti: (text, isTranslate) => translateIf(text, isTranslate, i18nGlobal.t),
+        te: (message) => translateError(message, i18nGlobal.t),
         setLanguage: (locale, force) => setLanguage(i18nGlobal, locale, force),
         setTimeZone: (timezone) => setTimeZone(timezone),
         initLocale: (lastUserLanguage, timezone) => initLocale(i18nGlobal, lastUserLanguage, timezone)
     };
 }
+
+export function useI18n() {
+    const i18nGlobal = useVueI18n();
+    return i18nFunctions(i18nGlobal);
+}