use the new popup select dialog

src/lib/common.ts

@@ -1,4 +1,4 @@
-import type { TypeAndName, TypeAndDisplayName } from '@/core/base.ts';
+import type { NameValue, TypeAndName, TypeAndDisplayName} from '@/core/base.ts';
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function isFunction(val: unknown): val is Function {
@@ -303,6 +303,16 @@ export function getItemByKeyValue<T>(src: Record<string, T>[] | Record<string, R
     return null;
 }
 
+export function findNameByValue(items: NameValue[], value: string): string | null {
+    for (const item of items) {
+        if (item.value === value) {
+            return item.name;
+        }
+    }
+
+    return null;
+}
+
 export function findNameByType(items: TypeAndName[], type: number): string | null {
     for (const item of items) {
         if (item.type === type) {

src/mobile-main.ts

@@ -24,7 +24,6 @@ import Framework7Checkbox from 'framework7/components/checkbox';
 import Framework7Radio from 'framework7/components/radio';
 import Framework7Toggle from 'framework7/components/toggle';
 import Framework7Range from 'framework7/components/range';
-import Framework7SmartSelect from 'framework7/components/smart-select';
 import Framework7Grid from 'framework7/components/grid';
 import Framework7Picker from 'framework7/components/picker';
 import Framework7InfiniteScroll from 'framework7/components/infinite-scroll';
@@ -61,7 +60,6 @@ import 'framework7/components/checkbox/css';
 import 'framework7/components/radio/css';
 import 'framework7/components/toggle/css';
 import 'framework7/components/range/css';
-import 'framework7/components/smart-select/css';
 import 'framework7/components/grid/css';
 import 'framework7/components/picker/css';
 import 'framework7/components/infinite-scroll/css';
@@ -144,7 +142,6 @@ Framework7.use([
     Framework7Radio,
     Framework7Toggle,
     Framework7Range,
-    Framework7SmartSelect,
     Framework7Grid,
     Framework7Picker,
     Framework7InfiniteScroll,

src/styles/mobile/global.css

@@ -180,6 +180,14 @@ i.icon.la, i.icon.las, i.icon.lab {
     text-overflow: ellipsis;
 }
 
+.settings-list .item-inner > .item-after {
+    max-width: 70%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    display: block;
+}
+
 .login-page-fixed-bottom {
     background-color: inherit !important;
 }

src/views/base/settings/AppSettingsPageBase.ts

@@ -7,21 +7,37 @@ import { useTransactionsStore } from '@/stores/transaction.ts';
 import { useOverviewStore } from '@/stores/overview.ts';
 import { useStatisticsStore } from '@/stores/statistics.ts';
 
-import type { TypeAndDisplayName } from '@/core/base.ts';
+import type { NameValue, TypeAndDisplayName } from '@/core/base.ts';
 import type { LocalizedTimezoneInfo } from '@/core/timezone.ts';
 
 export function useAppSettingPageBase() {
-    const { getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
+    const { tt, getAllTimezones, getAllTimezoneTypesUsedForStatistics, getAllCurrencySortingTypes, setTimeZone } = useI18n();
 
     const settingsStore = useSettingsStore();
     const transactionsStore = useTransactionsStore();
     const overviewStore = useOverviewStore();
     const statisticsStore = useStatisticsStore();
 
+    const allThemes = computed<NameValue[]>(() => {
+        return [
+            { name: tt('System Default'), value: 'auto' },
+            { name: tt('Light'), value: 'light' },
+            { name: tt('Dark'), value: 'dark' }
+        ];
+    });
+
     const allTimezones = computed<LocalizedTimezoneInfo[]>(() => getAllTimezones(true));
     const allTimezoneTypesUsedForStatistics = computed<TypeAndDisplayName[]>(() => getAllTimezoneTypesUsedForStatistics());
     const allCurrencySortingTypes = computed<TypeAndDisplayName[]>(() => getAllCurrencySortingTypes());
 
+    const allAutoSaveTransactionDraftTypes = computed<NameValue[]>(() => {
+        return [
+            { name: tt('Disabled'), value: 'disabled' },
+            { name: tt('Enabled'), value: 'enabled' },
+            { name: tt('Show Confirmation Every Time'), value: 'confirmation' }
+        ];
+    });
+
     const timeZone = computed<string>({
         get: () => settingsStore.appSettings.timeZone,
         set: (value) => {
@@ -94,9 +110,11 @@ export function useAppSettingPageBase() {
 
     return {
         // computed states
+        allThemes,
         allTimezones,
         allTimezoneTypesUsedForStatistics,
         allCurrencySortingTypes,
+        allAutoSaveTransactionDraftTypes,
         timeZone,
         isAutoUpdateExchangeRatesData,
         showAccountBalance,

src/views/desktop/app/settings/tabs/AppBasicSettingTab.vue

@@ -7,16 +7,12 @@
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
-                                    item-title="displayName"
+                                    item-title="name"
                                     item-value="value"
                                     persistent-placeholder
                                     :label="tt('Theme')"
                                     :placeholder="tt('Theme')"
-                                    :items="[
+                                    :items="allThemes"
-                                        { value: 'auto', displayName: tt('System Default') },
-                                        { value: 'light', displayName: tt('Light') },
-                                        { value: 'dark', displayName: tt('Dark') }
-                                    ]"
                                     v-model="currentTheme"
                                 />
                             </v-col>
@@ -147,16 +143,12 @@
                         <v-row>
                             <v-col cols="12" md="6">
                                 <v-select
-                                    item-title="displayName"
+                                    item-title="name"
                                     item-value="value"
                                     persistent-placeholder
                                     :label="tt('Automatically Save Draft')"
                                     :placeholder="tt('Automatically Save Draft')"
-                                    :items="[
+                                    :items="allAutoSaveTransactionDraftTypes"
-                                        { value: 'disabled', displayName: tt('Disabled') },
-                                        { value: 'enabled', displayName: tt('Enabled') },
-                                        { value: 'confirmation', displayName: tt('Show Confirmation Every Time') }
-                                    ]"
                                     v-model="autoSaveTransactionDraft"
                                 />
                             </v-col>
@@ -219,9 +211,11 @@ const theme = useTheme();
 
 const { tt, getAllEnableDisableOptions } = useI18n();
 const {
+    allThemes,
     allTimezones,
     allTimezoneTypesUsedForStatistics,
     allCurrencySortingTypes,
+    allAutoSaveTransactionDraftTypes,
     timeZone,
     isAutoUpdateExchangeRatesData,
     showAccountBalance,

src/views/mobile/SettingsPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-page @page:afterin="onPageAfterIn">
+    <f7-page>
         <f7-navbar :title="tt('Settings')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-block-title class="margin-top">{{ currentNickName }}</f7-block-title>
@@ -16,28 +16,45 @@
         </f7-list>
 
         <f7-block-title>{{ tt('Application') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item
-                :key="currentLocale + '_theme'"
+                link="#"
                 :title="tt('Theme')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Theme'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findNameByValue(allThemes, currentTheme)"
-                <select v-model="currentTheme">
+                @click="showThemePopup = true"
-                    <option value="auto">{{ tt('System Default') }}</option>
+            >
-                    <option value="light">{{ tt('Light') }}</option>
+                <list-item-selection-popup value-type="item"
-                    <option value="dark">{{ tt('Dark') }}</option>
+                                           key-field="value" value-field="value"
-                </select>
+                                           title-field="name"
+                                           :title="tt('Theme')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Theme')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allThemes"
+                                           v-model:show="showThemePopup"
+                                           v-model="currentTheme">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item :title="tt('Text Size')" link="/settings/textsize"></f7-list-item>
 
             <f7-list-item
-                :key="currentLocale + '_timezone'"
+                link="#"
                 :title="tt('Timezone')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="currentTimezoneName"
-                <select v-model="timeZone">
+                @click="showTimezonePopup = true"
-                    <option :value="tz.name" :key="tz.name"
+            >
-                            v-for="tz in allTimezones">{{ tz.displayNameWithUtcOffset }}</option>
+                <list-item-selection-popup value-type="item"
-                </select>
+                                           key-field="name" value-field="name"
+                                           title-field="displayNameWithUtcOffset"
+                                           :title="tt('Timezone')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Timezone')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTimezones"
+                                           v-model:show="showTimezonePopup"
+                                           v-model="timeZone">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item :title="tt('Application Lock')" :after="isEnableApplicationLock ? tt('Enabled') : tt('Disabled')" link="/app_lock"></f7-list-item>
@@ -83,6 +100,7 @@ import { useSettingsStore } from '@/stores/setting.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.ts';
 
+import { findNameByValue } from '@/lib/common.ts';
 import { getVersion, getDesktopVersionPath } from '@/lib/version.ts';
 import { isUserScheduledTransactionEnabled } from '@/lib/server_settings.ts';
 import { setExpenseAndIncomeAmountColor } from '@/lib/ui/common.ts';
@@ -91,9 +109,9 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getCurrentLanguageTag, formatUnixTimeToLongDate, initLocale } = useI18n();
+const { tt, formatUnixTimeToLongDate, initLocale } = useI18n();
 const { showToast, showConfirm } = useI18nUIComponents();
-const { allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
+const { allThemes, allTimezones, timeZone, isAutoUpdateExchangeRatesData, showAccountBalance } = useAppSettingPageBase();
 
 const rootStore = useRootStore();
 const settingsStore = useSettingsStore();
@@ -102,8 +120,9 @@ const exchangeRatesStore = useExchangeRatesStore();
 
 const version = `v${getVersion()}`;
 
-const currentLocale = ref<string>(getCurrentLanguageTag());
 const logouting = ref<boolean>(false);
+const showThemePopup = ref<boolean>(false);
+const showTimezonePopup = ref<boolean>(false);
 
 const currentNickName = computed<string>(() => userStore.currentUserNickname || tt('User'));
 
@@ -117,6 +136,16 @@ const currentTheme = computed<string>({
     }
 });
 
+const currentTimezoneName = computed<string>(() => {
+    for (const item of allTimezones.value) {
+        if (item.name === timeZone.value) {
+            return item.displayNameWithUtcOffset;
+        }
+    }
+
+    return '';
+});
+
 const isEnableAnimate = computed<boolean>({
     get: () => settingsStore.appSettings.animate,
     set: value => {
@@ -167,8 +196,4 @@ function logout(): void {
         });
     });
 }
-
-function onPageAfterIn(): void {
-    currentLocale.value = getCurrentLanguageTag();
-}
 </script>

src/views/mobile/SignupPage.vue

@@ -104,16 +104,23 @@
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('First Day of Week')"
                 :title="currentDayOfWeekName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
+                @click="showFirstDayOfWeekPopup = true"
             >
-                <select v-model="user.firstDayOfWeek">
+                <list-item-selection-popup value-type="item"
-                    <option :value="weekDay.type"
+                                           key-field="type" value-field="type"
-                            :key="weekDay.type"
+                                           title-field="displayName"
-                            v-for="weekDay in allWeekDays">{{ weekDay.displayName }}</option>
+                                           :title="tt('First Day of Week')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Date')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allWeekDays"
+                                           v-model:show="showFirstDayOfWeekPopup"
+                                           v-model="user.firstDayOfWeek">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
@@ -229,6 +236,7 @@ const rootStore = useRootStore();
 const usePresetCategories = ref<boolean>(false);
 const showLanguagePopup = ref<boolean>(false);
 const showDefaultCurrencyPopup = ref<boolean>(false);
+const showFirstDayOfWeekPopup = ref<boolean>(false);
 const showPresetCategories = ref<boolean>(false);
 const showPresetCategoriesMoreActionSheet = ref<boolean>(false);
 const showPresetCategoriesChangeLocaleSheet = ref<boolean>(false);

src/views/mobile/accounts/EditPage.vue

@@ -181,17 +181,24 @@
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Statement Date')"
                 :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
                 v-if="isAccountSupportCreditCardStatementDate"
+                @click="accountContext.showCreditCardStatementDatePopup = true"
             >
-                <select v-model="account.creditCardStatementDate">
+                <list-item-selection-popup value-type="item"
-                    <option :value="monthDay.day"
+                                           key-field="day" value-field="day"
-                            :key="monthDay.day"
+                                           title-field="displayName"
-                            v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
+                                           :title="tt('Statement Date')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Statement Date')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allAvailableMonthDays"
+                                           v-model:show="accountContext.showCreditCardStatementDatePopup"
+                                           v-model="account.creditCardStatementDate">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -305,17 +312,24 @@
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Statement Date')"
                 :title="getAccountCreditCardStatementDate(account.creditCardStatementDate)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Statement Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Statement Date'), popupCloseLinkText: tt('Done') }"
                 v-if="isAccountSupportCreditCardStatementDate"
+                @click="accountContext.showCreditCardStatementDatePopup = true"
             >
-                <select v-model="account.creditCardStatementDate">
+                <list-item-selection-popup value-type="item"
-                    <option :value="monthDay.day"
+                                           key-field="day" value-field="day"
-                            :key="monthDay.day"
+                                           title-field="displayName"
-                            v-for="monthDay in allAvailableMonthDays">{{ monthDay.displayName }}</option>
+                                           :title="tt('Statement Date')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Statement Date')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allAvailableMonthDays"
+                                           v-model:show="accountContext.showCreditCardStatementDatePopup"
+                                           v-model="account.creditCardStatementDate">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item :title="tt('Visible')" v-if="editAccountId">
@@ -532,6 +546,7 @@ interface AccountContext {
     showIconSelectionSheet: boolean;
     showColorSelectionSheet: boolean;
     showCurrencyPopup: boolean;
+    showCreditCardStatementDatePopup: boolean;
     showBalanceSheet: boolean;
     showBalanceDateTimeSheet: boolean;
     balanceDateTimeSheetMode: string;
@@ -570,6 +585,7 @@ const DEFAULT_ACCOUNT_CONTEXT: AccountContext = {
     showIconSelectionSheet: false,
     showColorSelectionSheet: false,
     showCurrencyPopup: false,
+    showCreditCardStatementDatePopup: false,
     showBalanceSheet: false,
     showBalanceDateTimeSheet: false,
     balanceDateTimeSheetMode: 'time'

src/views/mobile/settings/PageSettingsPage.vue

@@ -3,20 +3,29 @@
         <f7-navbar :title="tt('Page Settings')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-block-title class="margin-top">{{ tt('Overview Page') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item>
                 <span>{{ tt('Show Amount') }}</span>
                 <f7-toggle :checked="showAmountInHomePage" @toggle:change="showAmountInHomePage = $event"></f7-toggle>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 :title="tt('Timezone Used for Statistics')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, timezoneUsedForStatisticsInHomePage)"
-                <select v-model="timezoneUsedForStatisticsInHomePage">
+                @click="showTimezoneUsedForStatisticsInHomePagePopup = true"
-                    <option :value="timezoneType.type"
+            >
-                            :key="timezoneType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="timezoneType in allTimezoneTypesUsedForStatistics">{{ timezoneType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Timezone Used for Statistics')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Timezone Type')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTimezoneTypesUsedForStatistics"
+                                           v-model:show="showTimezoneUsedForStatisticsInHomePagePopup"
+                                           v-model="timezoneUsedForStatisticsInHomePage">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
@@ -35,13 +44,22 @@
         <f7-block-title>{{ tt('Transaction Edit Page') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                link="#"
                 :title="tt('Automatically Save Draft')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Automatically Save Draft'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findNameByValue(allAutoSaveTransactionDraftTypes, autoSaveTransactionDraft)"
-                <select v-model="autoSaveTransactionDraft">
+                @click="showAutoSaveTransactionDraftPopup = true"
-                    <option value="disabled">{{ tt('Disabled') }}</option>
+            >
-                    <option value="enabled">{{ tt('Enabled') }}</option>
+                <list-item-selection-popup value-type="item"
-                    <option value="confirmation">{{ tt('Show Confirmation Every Time') }}</option>
+                                           key-field="value" value-field="value"
-                </select>
+                                           title-field="name"
+                                           :title="tt('Automatically Save Draft')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Automatically Save Draft')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allAutoSaveTransactionDraftTypes"
+                                           v-model:show="showAutoSaveTransactionDraftPopup"
+                                           v-model="autoSaveTransactionDraft">
+                </list-item-selection-popup>
             </f7-list-item>
             <f7-list-item>
                 <span>{{ tt('Automatically Add Geolocation') }}</span>
@@ -52,19 +70,30 @@
         <f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                link="#"
                 :title="tt('Sort by')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort by'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allCurrencySortingTypes, currencySortByInExchangeRatesPage)"
-                <select v-model="currencySortByInExchangeRatesPage">
+                @click="showCurrencySortByInExchangeRatesPagePopup = true"
-                    <option :value="sortingType.type"
+            >
-                            :key="sortingType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="sortingType in allCurrencySortingTypes">{{ sortingType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Sort by')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Sort by')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencySortingTypes"
+                                           v-model:show="showCurrencySortByInExchangeRatesPagePopup"
+                                           v-model="currencySortByInExchangeRatesPage">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
     </f7-page>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import { useI18n } from '@/locales/helpers.ts';
 import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
 
@@ -72,6 +101,7 @@ const { tt } = useI18n();
 const {
     allTimezoneTypesUsedForStatistics,
     allCurrencySortingTypes,
+    allAutoSaveTransactionDraftTypes,
     showAmountInHomePage,
     timezoneUsedForStatisticsInHomePage,
     showTotalAmountInTransactionListPage,
@@ -80,4 +110,10 @@ const {
     isAutoGetCurrentGeoLocation,
     currencySortByInExchangeRatesPage
 } = useAppSettingPageBase();
+
+import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
+
+const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
+const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
+const showCurrencySortByInExchangeRatesPagePopup = ref<boolean>(false);
 </script>

src/views/mobile/statistics/SettingsPage.vue

@@ -3,25 +3,43 @@
         <f7-navbar :title="tt('Statistics Settings')" :back-link="tt('Back')"></f7-navbar>
 
         <f7-block-title class="margin-top">{{ tt('Common Settings') }}</f7-block-title>
-        <f7-list strong inset dividers>
+        <f7-list strong inset dividers class="settings-list">
             <f7-list-item
+                link="#"
                 :title="tt('Default Chart Data Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Data Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allChartDataTypes, defaultChartDataType)"
-                <select v-model="defaultChartDataType">
+                @click="showDefaultChartDataTypePopup = true"
-                    <option :value="chartDataType.type"
+            >
-                            :key="chartDataType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="chartDataType in allChartDataTypes">{{ chartDataType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Default Chart Data Type')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Chart Data Type')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allChartDataTypes"
+                                           v-model:show="showDefaultChartDataTypePopup"
+                                           v-model="defaultChartDataType">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 :title="tt('Timezone Used for Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allTimezoneTypesUsedForStatistics, defaultTimezoneType)"
-                <select v-model="defaultTimezoneType">
+                @click="showDefaultTimezoneTypePopup = true"
-                    <option :value="timezoneType.type"
+            >
-                            :key="timezoneType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="timezoneType in allTimezoneTypesUsedForStatistics">{{ timezoneType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Timezone Used for Date Range')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Timezone Type')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTimezoneTypesUsedForStatistics"
+                                           v-model:show="showDefaultTimezoneTypePopup"
+                                           v-model="defaultTimezoneType">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item :title="tt('Default Account Filter')" link="/settings/filter/account?type=statisticsDefault"></f7-list-item>
@@ -29,55 +47,93 @@
             <f7-list-item :title="tt('Default Transaction Category Filter')" link="/settings/filter/category?type=statisticsDefault"></f7-list-item>
 
             <f7-list-item
+                link="#"
                 :title="tt('Default Sort Order')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Sort Order'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allSortingTypes, defaultSortingType)"
-                <select v-model="defaultSortingType">
+                @click="showDefaultSortingTypePopup = true"
-                    <option :value="sortingType.type"
+            >
-                            :key="sortingType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="sortingType in allSortingTypes">{{ sortingType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Default Sort Order')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Sort Order')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allSortingTypes"
+                                           v-model:show="showDefaultSortingTypePopup"
+                                           v-model="defaultSortingType">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Categorical Analysis Settings') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                link="#"
                 :title="tt('Default Chart Type')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Chart Type'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allCategoricalChartTypes, defaultCategoricalChartType)"
-                <select v-model="defaultCategoricalChartType">
+                @click="showDefaultCategoricalChartTypePopup = true"
-                    <option :value="chartType.type"
+            >
-                            :key="chartType.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="chartType in allCategoricalChartTypes">{{ chartType.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Default Chart Type')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Chart Type')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCategoricalChartTypes"
+                                           v-model:show="showDefaultCategoricalChartTypePopup"
+                                           v-model="defaultCategoricalChartType">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 :title="tt('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allCategoricalChartDateRanges, defaultCategoricalChartDateRange)"
-                <select v-model="defaultCategoricalChartDateRange">
+                @click="showDefaultCategoricalChartDateRangePopup = true"
-                    <option :value="dateRange.type"
+            >
-                            :key="dateRange.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="dateRange in allCategoricalChartDateRanges">{{ dateRange.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Default Date Range')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Date Range')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCategoricalChartDateRanges"
+                                           v-model:show="showDefaultCategoricalChartDateRangePopup"
+                                           v-model="defaultCategoricalChartDateRange">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Trend Analysis Settings') }}</f7-block-title>
         <f7-list strong inset dividers>
             <f7-list-item
+                link="#"
                 :title="tt('Default Date Range')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), popupCloseLinkText: tt('Done') }">
+                :after="findDisplayNameByType(allTrendChartDateRanges, defaultTrendChartDateRange)"
-                <select v-model="defaultTrendChartDateRange">
+                @click="showDefaultTrendChartDateRangePopup = true"
-                    <option :value="dateRange.type"
+            >
-                            :key="dateRange.type"
+                <list-item-selection-popup value-type="item"
-                            v-for="dateRange in allTrendChartDateRanges">{{ dateRange.displayName }}</option>
+                                           key-field="type" value-field="type"
-                </select>
+                                           title-field="displayName"
+                                           :title="tt('Default Date Range')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Date Range')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTrendChartDateRanges"
+                                           v-model:show="showDefaultTrendChartDateRangePopup"
+                                           v-model="defaultTrendChartDateRange">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
     </f7-page>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
 import { useI18n } from '@/locales/helpers.ts';
 import { useStatisticsSettingPageBase } from '@/views/base/statistics/StatisticsSettingPageBase.ts';
 
@@ -96,4 +152,13 @@ const {
     defaultCategoricalChartDateRange,
     defaultTrendChartDateRange
 } = useStatisticsSettingPageBase();
+
+import { findDisplayNameByType } from '@/lib/common.ts';
+
+const showDefaultChartDataTypePopup = ref<boolean>(false);
+const showDefaultTimezoneTypePopup = ref<boolean>(false);
+const showDefaultSortingTypePopup = ref<boolean>(false);
+const showDefaultCategoricalChartTypePopup = ref<boolean>(false);
+const showDefaultCategoricalChartDateRangePopup = ref<boolean>(false);
+const showDefaultTrendChartDateRangePopup = ref<boolean>(false);
 </script>

src/views/mobile/transactions/EditPage.vue

@@ -301,16 +301,13 @@
 
             <f7-list-item
                 :no-chevron="mode === TransactionEditPageMode.View"
+                link="#"
                 class="list-item-with-header-and-title list-item-title-hide-overflow list-item-no-item-after"
                 :class="{ 'readonly': mode === TransactionEditPageMode.View }"
                 :header="tt('Transaction Timezone')"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Timezone'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Transaction Timezone'), popupCloseLinkText: tt('Done') }"
                 v-if="pageTypeAndMode?.type === TransactionEditPageType.Transaction || (pageTypeAndMode?.type === TransactionEditPageType.Template && transaction instanceof TransactionTemplate && transaction.templateType === TemplateType.Schedule.type)"
+                @click="showTimezonePopup = true"
             >
-                <select v-model="transaction.timeZone">
-                    <option :value="timezone.name" :key="timezone.name"
-                            v-for="timezone in allTimezones">{{ timezone.displayNameWithUtcOffset }}</option>
-                </select>
                 <template #title>
                     <f7-block class="list-item-custom-title no-padding no-margin">
                         <span>{{ `(${transactionDisplayTimezone})` }}</span>
@@ -318,6 +315,17 @@
                         <span class="transaction-edit-timezone-name" v-else-if="!transaction.timeZone && transaction.timeZone !== ''">{{ transactionTimezoneTimeDifference }}</span>
                     </f7-block>
                 </template>
+                <list-item-selection-popup value-type="item"
+                                           key-field="name" value-field="name"
+                                           title-field="displayNameWithUtcOffset"
+                                           :title="tt('Transaction Timezone')"
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Timezone')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTimezones"
+                                           v-model:show="showTimezonePopup"
+                                           v-model="transaction.timeZone">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
@@ -594,6 +602,7 @@ const submitted = ref<boolean>(false);
 const removingPictureId = ref<string | null>(null);
 const transactionDateTimeSheetMode = ref<string>('time');
 const showTimeInDefaultTimezone = ref<boolean>(false);
+const showTimezonePopup = ref<boolean>(false);
 const showGeoLocationActionSheet = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 const showSourceAmountSheet = ref<boolean>(false);

src/views/mobile/users/UserProfilePage.vue

@@ -111,16 +111,23 @@
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Editable Transaction Range')"
                 :title="findDisplayNameByType(allTransactionEditScopeTypes, newProfile.transactionEditScope)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date Range'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Editable Transaction Range'), popupCloseLinkText: tt('Done') }"
+                @click="showEditableTransactionRangePopup = true"
             >
-                <select v-model="newProfile.transactionEditScope">
+                <list-item-selection-popup value-type="item"
-                    <option :value="option.type"
+                                           key-field="type" value-field="type"
-                            :key="option.type"
+                                           title-field="displayName"
-                            v-for="option in allTransactionEditScopeTypes">{{ option.displayName }}</option>
+                                           :title="tt('Editable Transaction Range')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Date Range')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allTransactionEditScopeTypes"
+                                           v-model:show="showEditableTransactionRangePopup"
+                                           v-model="newProfile.transactionEditScope">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item class="ebk-list-item-error-info" v-if="extendInputIsInvalid" :footer="tt(extendInputInvalidProblemMessage || '')"></f7-list-item>
@@ -173,153 +180,230 @@
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('First Day of Week')"
                 :title="currentDayOfWeekName"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Date'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('First Day of Week'), popupCloseLinkText: tt('Done') }"
+                @click="showFirstDayOfWeekPopup = true"
             >
-                <select v-model="newProfile.firstDayOfWeek">
+                <list-item-selection-popup value-type="item"
-                    <option :value="weekDay.type"
+                                           key-field="type" value-field="type"
-                            :key="weekDay.type"
+                                           title-field="displayName"
-                            v-for="weekDay in allWeekDays">{{ weekDay.displayName }}</option>
+                                           :title="tt('First Day of Week')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Date')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allWeekDays"
+                                           v-model:show="showFirstDayOfWeekPopup"
+                                           v-model="newProfile.firstDayOfWeek">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Long Date Format')"
                 :title="findDisplayNameByType(allLongDateFormats, newProfile.longDateFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Date Format'), popupCloseLinkText: tt('Done') }"
+                @click="showLongDateFormatPopup = true"
             >
-                <select v-model="newProfile.longDateFormat">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allLongDateFormats">{{ format.displayName }}</option>
+                                           :title="tt('Long Date Format')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Long Date Format')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allLongDateFormats"
+                                           v-model:show="showLongDateFormatPopup"
+                                           v-model="newProfile.longDateFormat">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Short Date Format')"
                 :title="findDisplayNameByType(allShortDateFormats, newProfile.shortDateFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Date Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Date Format'), popupCloseLinkText: tt('Done') }"
+                @click="showShortDateFormatPopup = true"
             >
-                <select v-model="newProfile.shortDateFormat">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allShortDateFormats">{{ format.displayName }}</option>
+                                           :title="tt('Short Date Format')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Short Date Format')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allShortDateFormats"
+                                           v-model:show="showShortDateFormatPopup"
+                                           v-model="newProfile.shortDateFormat">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Long Time Format')"
                 :title="findDisplayNameByType(allLongTimeFormats, newProfile.longTimeFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Long Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Long Time Format'), popupCloseLinkText: tt('Done') }"
+                @click="showLongTimeFormatPopup = true"
             >
-                <select v-model="newProfile.longTimeFormat">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allLongTimeFormats">{{ format.displayName }}</option>
+                                           :title="tt('Long Time Format')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Long Time Format')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allLongTimeFormats"
+                                           v-model:show="showLongTimeFormatPopup"
+                                           v-model="newProfile.longTimeFormat">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Short Time Format')"
                 :title="findDisplayNameByType(allShortTimeFormats, newProfile.shortTimeFormat)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Short Time Format'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Short Time Format'), popupCloseLinkText: tt('Done') }"
+                @click="showShortTimeFormatPopup = true"
             >
-                <select v-model="newProfile.shortTimeFormat">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allShortTimeFormats">{{ format.displayName }}</option>
+                                           :title="tt('Short Time Format')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Short Time Format')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allShortTimeFormats"
+                                           v-model:show="showShortTimeFormatPopup"
+                                           v-model="newProfile.shortTimeFormat">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Currency Display Mode')"
                 :title="findDisplayNameByType(allCurrencyDisplayTypes, newProfile.currencyDisplayType)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Currency Display Mode'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Currency Display Mode'), popupCloseLinkText: tt('Done') }"
+                @click="showCurrencyDisplayTypePopup = true"
             >
-                <select v-model="newProfile.currencyDisplayType">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allCurrencyDisplayTypes">{{ format.displayName }}</option>
+                                           :title="tt('Currency Display Mode')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Currency Display Mode')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allCurrencyDisplayTypes"
+                                           v-model:show="showCurrencyDisplayTypePopup"
+                                           v-model="newProfile.currencyDisplayType">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Digit Grouping')"
                 :title="findDisplayNameByType(allDigitGroupingTypes, newProfile.digitGrouping)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping'), popupCloseLinkText: tt('Done') }"
+                @click="showDigitGroupingPopup = true"
             >
-                <select v-model="newProfile.digitGrouping">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allDigitGroupingTypes">{{ format.displayName }}</option>
+                                           :title="tt('Digit Grouping')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Digit Grouping')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allDigitGroupingTypes"
+                                           v-model:show="showDigitGroupingPopup"
+                                           v-model="newProfile.digitGrouping">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :disabled="!supportDigitGroupingSymbol"
                 :header="tt('Digit Grouping Symbol')"
                 :title="findDisplayNameByType(allDigitGroupingSymbols, newProfile.digitGroupingSymbol)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Digit Grouping Symbol'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Digit Grouping Symbol'), popupCloseLinkText: tt('Done') }"
+                @click="showDigitGroupingSymbolPopup = true"
             >
-                <select v-model="newProfile.digitGroupingSymbol">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allDigitGroupingSymbols">{{ format.displayName }}</option>
+                                           :title="tt('Digit Grouping Symbol')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Digit Grouping Symbol')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allDigitGroupingSymbols"
+                                           v-model:show="showDigitGroupingSymbolPopup"
+                                           v-model="newProfile.digitGroupingSymbol">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Decimal Separator')"
                 :title="findDisplayNameByType(allDecimalSeparators, newProfile.decimalSeparator)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Decimal Separator'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Decimal Separator'), popupCloseLinkText: tt('Done') }"
+                @click="showDecimalSeparatorPopup = true"
             >
-                <select v-model="newProfile.decimalSeparator">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allDecimalSeparators">{{ format.displayName }}</option>
+                                           :title="tt('Decimal Separator')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Decimal Separator')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allDecimalSeparators"
+                                           v-model:show="showDecimalSeparatorPopup"
+                                           v-model="newProfile.decimalSeparator">
+                </list-item-selection-popup>
             </f7-list-item>
         </f7-list>
 
         <f7-list form strong inset dividers class="margin-vertical" v-if="!loading">
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Expense Amount Color')"
                 :title="findDisplayNameByType(allExpenseAmountColorTypes, newProfile.expenseAmountColor)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Expense Amount Color'), popupCloseLinkText: tt('Done') }"
+                @click="showExpenseAmountColorPopup = true"
             >
-                <select v-model="newProfile.expenseAmountColor">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allExpenseAmountColorTypes">{{ format.displayName }}</option>
+                                           :title="tt('Expense Amount Color')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Color')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allExpenseAmountColorTypes"
+                                           v-model:show="showExpenseAmountColorPopup"
+                                           v-model="newProfile.expenseAmountColor">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item
+                link="#"
                 class="list-item-with-header-and-title list-item-no-item-after"
                 :header="tt('Income Amount Color')"
                 :title="findDisplayNameByType(allIncomeAmountColorTypes, newProfile.incomeAmountColor)"
-                smart-select :smart-select-params="{ openIn: 'popup', popupPush: true, closeOnSelect: true, scrollToSelectedItem: true, searchbar: true, searchbarPlaceholder: tt('Color'), searchbarDisableText: tt('Cancel'), appendSearchbarNotFound: tt('No results'), pageTitle: tt('Income Amount Color'), popupCloseLinkText: tt('Done') }"
+                @click="showIncomeAmountColorPopup = true"
             >
-                <select v-model="newProfile.incomeAmountColor">
+                <list-item-selection-popup value-type="item"
-                    <option :value="format.type"
+                                           key-field="type" value-field="type"
-                            :key="format.type"
+                                           title-field="displayName"
-                            v-for="format in allIncomeAmountColorTypes">{{ format.displayName }}</option>
+                                           :title="tt('Income Amount Color')"
-                </select>
+                                           :enable-filter="true"
+                                           :filter-placeholder="tt('Color')"
+                                           :filter-no-items-text="tt('No results')"
+                                           :items="allIncomeAmountColorTypes"
+                                           v-model:show="showIncomeAmountColorPopup"
+                                           v-model="newProfile.incomeAmountColor">
+                </list-item-selection-popup>
             </f7-list-item>
 
             <f7-list-item class="ebk-list-item-error-info" v-if="langAndRegionInputIsInvalid" :footer="tt(langAndRegionInputInvalidProblemMessage || '')"></f7-list-item>
@@ -418,8 +502,20 @@ const currentPassword = ref<string>('');
 const loadingError = ref<unknown | null>(null);
 const showInputPasswordSheet = ref<boolean>(false);
 const showAccountSheet = ref<boolean>(false);
+const showEditableTransactionRangePopup = ref<boolean>(false);
 const showLanguagePopup = ref<boolean>(false);
 const showDefaultCurrencyPopup = ref<boolean>(false);
+const showFirstDayOfWeekPopup = ref<boolean>(false);
+const showLongDateFormatPopup = ref<boolean>(false);
+const showShortDateFormatPopup = ref<boolean>(false);
+const showLongTimeFormatPopup = ref<boolean>(false);
+const showShortTimeFormatPopup = ref<boolean>(false);
+const showCurrencyDisplayTypePopup = ref<boolean>(false);
+const showDigitGroupingPopup = ref<boolean>(false);
+const showDigitGroupingSymbolPopup = ref<boolean>(false);
+const showDecimalSeparatorPopup = ref<boolean>(false);
+const showExpenseAmountColorPopup = ref<boolean>(false);
+const showIncomeAmountColorPopup = ref<boolean>(false);
 const showMoreActionSheet = ref<boolean>(false);
 
 const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(true));