From b2e36a24fdb1203247788ec4640031dfb378a16c Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 11 Jan 2025 00:53:22 +0800
Subject: [PATCH] migrate mobile ui utils to typescript

---
 src/MobileApp.vue                             |  2 +-
 src/components/mobile/ColorSelectionSheet.vue |  2 +-
 .../mobile/DateTimeSelectionSheet.vue         |  2 +-
 src/components/mobile/IconSelectionSheet.vue  |  2 +-
 .../mobile/ListItemSelectionSheet.vue         |  2 +-
 src/components/mobile/NumberPadSheet.vue      |  2 +-
 .../mobile/ScheduleFrequencySheet.vue         |  2 +-
 .../mobile/TransactionTagSelectionSheet.vue   |  2 +-
 .../mobile/TreeViewSelectionSheet.vue         |  2 +-
 .../TwoColumnListItemSelectionSheet.vue       |  2 +-
 src/directives/mobile/textareaAutoSize.js     | 10 ---
 src/directives/mobile/textareaAutoSize.ts     | 10 +++
 src/lib/common.ts                             | 10 +++
 src/lib/ui/{mobile.js => mobile.ts}           | 79 +++++++++++--------
 src/mobile-main.js                            |  4 +-
 src/views/mobile/LoginPage.vue                |  2 +-
 src/views/mobile/UnlockPage.vue               |  2 +-
 src/views/mobile/accounts/ListPage.vue        |  2 +-
 src/views/mobile/categories/ListPage.vue      |  2 +-
 .../mobile/settings/TextSizeSettingsPage.vue  |  2 +-
 .../mobile/statistics/TransactionPage.vue     |  2 +-
 src/views/mobile/tags/ListPage.vue            |  2 +-
 src/views/mobile/templates/ListPage.vue       |  2 +-
 src/views/mobile/transactions/ListPage.vue    |  2 +-
 src/views/mobile/users/SessionListPage.vue    |  2 +-
 25 files changed, 88 insertions(+), 65 deletions(-)
 delete mode 100644 src/directives/mobile/textareaAutoSize.js
 create mode 100644 src/directives/mobile/textareaAutoSize.ts
 rename src/lib/ui/{mobile.js => mobile.ts} (55%)

diff --git a/src/MobileApp.vue b/src/MobileApp.vue
index 6847b585..62b6e953 100644
--- a/src/MobileApp.vue
+++ b/src/MobileApp.vue
@@ -27,7 +27,7 @@ import { getTheme, isEnableAnimate } from '@/lib/settings.ts';
 import { initMapProvider } from '@/lib/map/index.ts';
 import { isUserLogined, isUserUnlocked } from '@/lib/userstate.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
-import { isModalShowing, setAppFontSize } from '@/lib/ui/mobile.js';
+import { isModalShowing, setAppFontSize } from '@/lib/ui/mobile.ts';
 
 const { tt, getCurrentLanguageInfo, setLanguage, initLocale } = useI18n();
 
diff --git a/src/components/mobile/ColorSelectionSheet.vue b/src/components/mobile/ColorSelectionSheet.vue
index 3bcb2c9b..d99fc385 100644
--- a/src/components/mobile/ColorSelectionSheet.vue
+++ b/src/components/mobile/ColorSelectionSheet.vue
@@ -36,7 +36,7 @@ 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';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: ColorValue;
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index f5bd6073..5487d955 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -64,7 +64,7 @@ import {
     getTimeValues,
     getCombinedDateAndTimeValues
 } from '@/lib/datetime.ts';
-import { createInlinePicker } from '@/lib/ui/mobile.js';
+import { createInlinePicker } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/components/mobile/IconSelectionSheet.vue b/src/components/mobile/IconSelectionSheet.vue
index 5c02bc3a..0bb129b4 100644
--- a/src/components/mobile/IconSelectionSheet.vue
+++ b/src/components/mobile/IconSelectionSheet.vue
@@ -36,7 +36,7 @@ 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';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 const props = defineProps<{
     modelValue: string;
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 5d1b1bfc..071aa796 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/components/mobile/NumberPadSheet.vue b/src/components/mobile/NumberPadSheet.vue
index 5d9a8745..666b9d23 100644
--- a/src/components/mobile/NumberPadSheet.vue
+++ b/src/components/mobile/NumberPadSheet.vue
@@ -69,7 +69,7 @@
 import { type Ref, ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helper.js';
-import { useI18nUIComponents } from '@/lib/ui/mobile.js';
+import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
 import { useUserStore } from '@/stores/user.ts';
 
 import { ALL_CURRENCIES } from '@/consts/currency.ts';
diff --git a/src/components/mobile/ScheduleFrequencySheet.vue b/src/components/mobile/ScheduleFrequencySheet.vue
index 2f138fc7..2f3b8fd1 100644
--- a/src/components/mobile/ScheduleFrequencySheet.vue
+++ b/src/components/mobile/ScheduleFrequencySheet.vue
@@ -70,7 +70,7 @@ import { useUserStore } from '@/stores/user.ts';
 
 import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
 import { sortNumbersArray } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/components/mobile/TransactionTagSelectionSheet.vue b/src/components/mobile/TransactionTagSelectionSheet.vue
index cafd4b1e..c6cfafd3 100644
--- a/src/components/mobile/TransactionTagSelectionSheet.vue
+++ b/src/components/mobile/TransactionTagSelectionSheet.vue
@@ -80,7 +80,7 @@ import { mapStores } from 'pinia';
 import { useTransactionTagsStore } from '@/stores/transactionTag.js';
 
 import { copyArrayTo } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 2f372fdc..ffc8a9b6 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -42,7 +42,7 @@
 
 <script>
 import { isArray } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index 79e087fd..d1a8c71e 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -66,7 +66,7 @@ import {
     getItemByKeyValue,
     getPrimaryValueBySecondaryValue
 } from '@/lib/common.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/directives/mobile/textareaAutoSize.js b/src/directives/mobile/textareaAutoSize.js
deleted file mode 100644
index 4102118f..00000000
--- a/src/directives/mobile/textareaAutoSize.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { autoChangeTextareaSize } from '@/lib/ui/mobile.js';
-
-export default {
-    mounted(el) {
-        autoChangeTextareaSize(el);
-    },
-    updated(el) {
-        autoChangeTextareaSize(el);
-    }
-}
diff --git a/src/directives/mobile/textareaAutoSize.ts b/src/directives/mobile/textareaAutoSize.ts
new file mode 100644
index 00000000..c9a5a698
--- /dev/null
+++ b/src/directives/mobile/textareaAutoSize.ts
@@ -0,0 +1,10 @@
+import { autoChangeTextareaSize } from '@/lib/ui/mobile.ts';
+
+export default {
+    mounted(el: HTMLElement): void {
+        autoChangeTextareaSize(el);
+    },
+    updated(el: HTMLElement): void {
+        autoChangeTextareaSize(el);
+    }
+}
diff --git a/src/lib/common.ts b/src/lib/common.ts
index e8e11d78..243accf5 100644
--- a/src/lib/common.ts
+++ b/src/lib/common.ts
@@ -133,6 +133,16 @@ export function isObjectEmpty(obj: object): boolean {
     return true;
 }
 
+export function getNumberValue(value: unknown, defaultValue: number): number {
+    if (isString(value)) {
+        return parseInt(value as string, 10);
+    } else if (isNumber(value)) {
+        return value as number;
+    } else {
+        return defaultValue;
+    }
+}
+
 export function sortNumbersArray(array: number[]): number[] {
     return array.sort(function (num1, num2) {
         return num1 - num2;
diff --git a/src/lib/ui/mobile.js b/src/lib/ui/mobile.ts
similarity index 55%
rename from src/lib/ui/mobile.js
rename to src/lib/ui/mobile.ts
index a5dc2e97..22164810 100644
--- a/src/lib/ui/mobile.js
+++ b/src/lib/ui/mobile.ts
@@ -1,12 +1,26 @@
 import { useI18n as useVueI18n } from 'vue-i18n';
 import { f7, f7ready } from 'framework7-vue';
+import type { Dialog, Picker, Router } from 'framework7/types';
 
 import { FontSize, FONT_SIZE_PREVIEW_CLASSNAME_PREFIX } from '@/core/font.ts';
-import { translateError } from '@/locales/helper';
-
+import { getNumberValue } from '../common.ts';
 import { isEnableAnimate } from '../settings.ts';
+// @ts-expect-error the above file is migrating to ts
+import { translateError } from '@/locales/helper.js';
 
-export function showAlert(message, confirmCallback, translateFn) {
+interface Framework7Dom {
+    length: number;
+    [index: number]: Element;
+    find: (selector?: string) => Framework7Dom;
+    offset(): { top: number; left: number };
+    scrollTop(position: number, duration?: number, callback?: () => void): Framework7Dom;
+    outerHeight(includeMargin?: boolean): number;
+    css(property: string): string | number;
+}
+
+type TranslateFunction = (message: string) => string;
+
+export function showAlert(message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, translateFn: TranslateFunction): void {
     f7ready((f7) => {
         f7.dialog.create({
             title: translateFn('global.app.title'),
@@ -22,7 +36,7 @@ export function showAlert(message, confirmCallback, translateFn) {
     });
 }
 
-export function showConfirm(message, confirmCallback, cancelCallback, translateFn) {
+export function showConfirm(message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: (dialog: Dialog.Dialog, e: Event) => void, translateFn: TranslateFunction): void {
     f7ready((f7) => {
         f7.dialog.create({
             title: translateFn('global.app.title'),
@@ -42,7 +56,7 @@ export function showConfirm(message, confirmCallback, cancelCallback, translateF
     });
 }
 
-export function showToast(message, timeout, translateFn) {
+export function showToast(message: string, timeout: number, translateFn: TranslateFunction):void {
     f7ready((f7) => {
         f7.toast.create({
             text: translateError(message, translateFn),
@@ -52,7 +66,7 @@ export function showToast(message, timeout, translateFn) {
     });
 }
 
-export function showLoading(delayConditionFunc, delayMills) {
+export function showLoading(delayConditionFunc: () => boolean, delayMills: number): void {
     if (!delayConditionFunc) {
         f7ready((f7) => {
             return f7.preloader.show();
@@ -75,7 +89,7 @@ export function hideLoading() {
     });
 }
 
-export function createInlinePicker(containerEl, inputEl, cols, value, events) {
+export function createInlinePicker(containerEl: HTMLElement, inputEl: HTMLElement, cols: Picker.ColumnParameters[], value: unknown[], events?: { change: (picker: Picker.Picker, value: unknown, displayValue: unknown) => void }): Picker.Picker {
     return f7.picker.create({
         containerEl: containerEl,
         inputEl: inputEl,
@@ -87,7 +101,8 @@ export function createInlinePicker(containerEl, inputEl, cols, value, events) {
     });
 }
 
-export function routeBackOnError(f7router, errorPropertyName) {
+export function routeBackOnError(f7router: Router.Router, errorPropertyName: string): void {
+    // @ts-expect-error vue SFC would be migrated to composition API and this function would be removed in the future
     const self = this;
     const router = f7router;
 
@@ -106,28 +121,24 @@ export function routeBackOnError(f7router, errorPropertyName) {
     });
 }
 
-export function elements(selector) {
-    return f7.$(selector);
-}
-
-export function isModalShowing() {
+export function isModalShowing(): number {
     return f7.$('.modal-in').length;
 }
 
-export function onSwipeoutDeleted(domId, callback) {
+export function onSwipeoutDeleted(domId: string, callback: () => void): void {
     f7.swipeout.delete(f7.$('#' + domId), callback);
 }
 
-export function autoChangeTextareaSize(el) {
-    f7.$(el).find('textarea').each(el => {
-        el.scrollTop = 0;
-        el.style.height = '';
-        el.style.height = el.scrollHeight + 'px';
+export function autoChangeTextareaSize(el: HTMLElement): void {
+    f7.$(el).find('textarea').each((child: HTMLElement) => {
+        child.scrollTop = 0;
+        child.style.height = '';
+        child.style.height = child.scrollHeight + 'px';
     });
 }
 
-export function setAppFontSize(type) {
-    const htmlElement = elements('html');
+export function setAppFontSize(type: number): void {
+    const htmlElement = f7.$('html');
     const allFontSizes = FontSize.values();
 
     for (let i = 0; i < allFontSizes.length; i++) {
@@ -143,7 +154,7 @@ export function setAppFontSize(type) {
     }
 }
 
-export function getFontSizePreviewClassName(type) {
+export function getFontSizePreviewClassName(type: number): string {
     const allFontSizes = FontSize.values();
 
     for (let i = 0; i < allFontSizes.length; i++) {
@@ -157,7 +168,7 @@ export function getFontSizePreviewClassName(type) {
     return FONT_SIZE_PREVIEW_CLASSNAME_PREFIX + FontSize.Default.className;
 }
 
-export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSelector) {
+export function scrollToSelectedItem(parentEl: Framework7Dom, containerSelector: string, selectedItemSelector: string): void {
     if (!parentEl || !parentEl.length) {
         return;
     }
@@ -169,16 +180,18 @@ export function scrollToSelectedItem(parentEl, containerSelector, selectedItemSe
         return;
     }
 
-    let targetPos = selectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
+    const containerPaddingTop = getNumberValue(container.css('padding-top'), 0);
+
+    let targetPos = selectedItem.offset().top - container.offset().top - containerPaddingTop
         - (container.outerHeight() - selectedItem.outerHeight()) / 2;
 
     if (selectedItem.length > 1) {
-        let firstSelectedItem = elements(selectedItem[0]);
-        let lastSelectedItem = elements(selectedItem[selectedItem.length - 1]);
+        const firstSelectedItem = f7.$(selectedItem[0]);
+        const lastSelectedItem = f7.$(selectedItem[selectedItem.length - 1]);
 
-        let firstSelectedItemInTop = firstSelectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10);
-        let lastSelectedItemInTop = lastSelectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10);
-        let lastSelectedItemInBottom = lastSelectedItem.offset().top - container.offset().top - parseInt(container.css('padding-top'), 10)
+        const firstSelectedItemInTop = firstSelectedItem.offset().top - container.offset().top - containerPaddingTop;
+        const lastSelectedItemInTop = lastSelectedItem.offset().top - container.offset().top - containerPaddingTop;
+        const lastSelectedItemInBottom = lastSelectedItem.offset().top - container.offset().top - containerPaddingTop
             - (container.outerHeight() - firstSelectedItem.outerHeight());
 
         targetPos = (firstSelectedItemInTop + lastSelectedItemInBottom) / 2;
@@ -199,8 +212,8 @@ export function useI18nUIComponents() {
     const i18nGlobal = useVueI18n();
 
     return {
-        showAlert: (message, confirmCallback) => showAlert(message, confirmCallback, i18nGlobal.t),
-        showConfirm: (message, confirmCallback, cancelCallback) => showConfirm(message, confirmCallback, cancelCallback, i18nGlobal.t),
-        showToast: (message, timeout) => showToast(message, timeout, i18nGlobal.t)
-    };
+        showAlert: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void) => showAlert(message, confirmCallback, i18nGlobal.t),
+        showConfirm: (message: string, confirmCallback: (dialog: Dialog.Dialog, e: Event) => void, cancelCallback: (dialog: Dialog.Dialog, e: Event) => void): void => showConfirm(message, confirmCallback, cancelCallback, i18nGlobal.t),
+        showToast: (message: string, timeout: number): void => showToast(message, timeout, i18nGlobal.t)
+    }
 }
diff --git a/src/mobile-main.js b/src/mobile-main.js
index c2b2067d..74436a42 100644
--- a/src/mobile-main.js
+++ b/src/mobile-main.js
@@ -92,7 +92,7 @@ import {
     showLoading,
     hideLoading,
     routeBackOnError
-} from '@/lib/ui/mobile.js';
+} from '@/lib/ui/mobile.ts';
 
 import PinCodeInput from '@/components/common/PinCodeInput.vue';
 import MapView from '@/components/common/MapView.vue';
@@ -117,7 +117,7 @@ import MapSheet from '@/components/mobile/MapSheet.vue';
 import TransactionTagSelectionSheet from '@/components/mobile/TransactionTagSelectionSheet.vue';
 import ScheduleFrequencySheet from '@/components/mobile/ScheduleFrequencySheet.vue';
 
-import TextareaAutoSize from '@/directives/mobile/textareaAutoSize.js';
+import TextareaAutoSize from '@/directives/mobile/textareaAutoSize.ts';
 
 import '@/styles/mobile/global.css';
 import '@/styles/mobile/font-size-default.css';
diff --git a/src/views/mobile/LoginPage.vue b/src/views/mobile/LoginPage.vue
index ee61021d..477119d4 100644
--- a/src/views/mobile/LoginPage.vue
+++ b/src/views/mobile/LoginPage.vue
@@ -197,7 +197,7 @@ import {
 } from '@/lib/server_settings.ts';
 import { getDesktopVersionPath } from '@/lib/version.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
-import { isModalShowing } from '@/lib/ui/mobile.js';
+import { isModalShowing } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/UnlockPage.vue b/src/views/mobile/UnlockPage.vue
index b040243f..2f230a3e 100644
--- a/src/views/mobile/UnlockPage.vue
+++ b/src/views/mobile/UnlockPage.vue
@@ -83,7 +83,7 @@ import {
     getWebAuthnCredentialId
 } from '@/lib/userstate.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
-import { isModalShowing } from '@/lib/ui/mobile.js';
+import { isModalShowing } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/accounts/ListPage.vue b/src/views/mobile/accounts/ListPage.vue
index 04367d35..677f4f07 100644
--- a/src/views/mobile/accounts/ListPage.vue
+++ b/src/views/mobile/accounts/ListPage.vue
@@ -181,7 +181,7 @@ import { useAccountsStore } from '@/stores/account.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
 import { AccountType, AccountCategory } from '@/core/account.ts';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/categories/ListPage.vue b/src/views/mobile/categories/ListPage.vue
index 7354387f..5ad1e6b1 100644
--- a/src/views/mobile/categories/ListPage.vue
+++ b/src/views/mobile/categories/ListPage.vue
@@ -96,7 +96,7 @@ import {
     getFirstShowingId,
     getLastShowingId
 } from '@/lib/category.js';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/settings/TextSizeSettingsPage.vue b/src/views/mobile/settings/TextSizeSettingsPage.vue
index d181629b..96786115 100644
--- a/src/views/mobile/settings/TextSizeSettingsPage.vue
+++ b/src/views/mobile/settings/TextSizeSettingsPage.vue
@@ -118,7 +118,7 @@ import { useUserStore } from '@/stores/user.ts';
 
 import { FontSize } from '@/core/font.ts';
 import { getCurrentUnixTime, getDay, getDayOfWeekName } from '@/lib/datetime.ts';
-import { setAppFontSize, getFontSizePreviewClassName } from '@/lib/ui/mobile.js';
+import { setAppFontSize, getFontSizePreviewClassName } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 687c3062..a1573fdd 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -349,7 +349,7 @@ import {
     getDateTypeByDateRange,
     getDateRangeByDateType
 } from '@/lib/datetime.ts';
-import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/tags/ListPage.vue b/src/views/mobile/tags/ListPage.vue
index e9d1b1f4..0456bf7f 100644
--- a/src/views/mobile/tags/ListPage.vue
+++ b/src/views/mobile/tags/ListPage.vue
@@ -152,7 +152,7 @@ import {
     getFirstShowingId,
     getLastShowingId
 } from '@/lib/tag.js';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/templates/ListPage.vue b/src/views/mobile/templates/ListPage.vue
index 37db334f..4f2d8dbb 100644
--- a/src/views/mobile/templates/ListPage.vue
+++ b/src/views/mobile/templates/ListPage.vue
@@ -95,7 +95,7 @@ import {
     getFirstShowingId,
     getLastShowingId
 } from '@/lib/template.js';
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/transactions/ListPage.vue b/src/views/mobile/transactions/ListPage.vue
index b0955918..ade77b9f 100644
--- a/src/views/mobile/transactions/ListPage.vue
+++ b/src/views/mobile/transactions/ListPage.vue
@@ -551,7 +551,7 @@ import {
 import { categoryTypeToTransactionType, transactionTypeToCategoryType } from '@/lib/category.js';
 import { getUnifiedSelectedAccountsCurrencyOrDefaultCurrency } from '@/lib/account.js';
 import { getTransactionDisplayAmount } from '@/lib/transaction.js';
-import { onSwipeoutDeleted, scrollToSelectedItem } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [
diff --git a/src/views/mobile/users/SessionListPage.vue b/src/views/mobile/users/SessionListPage.vue
index 7736f961..38e9fda4 100644
--- a/src/views/mobile/users/SessionListPage.vue
+++ b/src/views/mobile/users/SessionListPage.vue
@@ -50,7 +50,7 @@ import { useTokensStore } from '@/stores/token.ts';
 import { isEquals } from '@/lib/common.ts';
 import { parseSessionInfo } from '@/lib/session.ts';
 
-import { onSwipeoutDeleted } from '@/lib/ui/mobile.js';
+import { onSwipeoutDeleted } from '@/lib/ui/mobile.ts';
 
 export default {
     props: [