modify language select style

src/components/base/LanguageSelectButtonBase.ts

@@ -0,0 +1,72 @@
+import { computed } from 'vue';
+
+import type { LanguageOption } from '@/locales/index.ts';
+import { useI18n } from '@/locales/helpers.ts';
+
+import { useSettingsStore } from '@/stores/setting.ts';
+
+export interface LanguageSelectButtonBaseProps {
+    disabled?: boolean;
+    useModelValue?: boolean;
+    modelValue?: string;
+}
+
+export interface LanguageSelectButtonBaseEmits {
+    (e: 'update:modelValue', value: string): void;
+}
+
+export function useLanguageSelectButtonBase(props: LanguageSelectButtonBaseProps, emit: LanguageSelectButtonBaseEmits) {
+    const { getCurrentLanguageTag, getCurrentLanguageDisplayName, getAllLanguageOptions, getLanguageInfo, setLanguage } = useI18n();
+
+    const settingsStore = useSettingsStore();
+
+    const allLanguages = computed<LanguageOption[]>(() => getAllLanguageOptions(false));
+
+    const currentLocale = computed<string>({
+        get: () => getCurrentLanguageTag(),
+        set: (value: string) => {
+            const localeDefaultSettings = setLanguage(value);
+            settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
+        }
+    });
+
+    const currentLanguageName = computed<string>(() => {
+        if (props.useModelValue && props.modelValue) {
+            const languageInfo = getLanguageInfo(props.modelValue);
+
+            if (!languageInfo) {
+                return '';
+            }
+
+            return languageInfo.displayName;
+        } else {
+            return getCurrentLanguageDisplayName()
+        }
+    });
+
+    function updateLanguage(languageTag: string): void {
+        if (props.useModelValue) {
+            emit('update:modelValue', languageTag);
+        } else {
+            currentLocale.value = languageTag;
+        }
+    }
+
+    function isLanguageSelected(languageTag: string): boolean {
+        if (props.useModelValue) {
+            return props.modelValue === languageTag;
+        } else {
+            return currentLocale.value === languageTag;
+        }
+    }
+
+    return {
+        // computed states
+        allLanguages,
+        currentLocale,
+        currentLanguageName,
+        // functions
+        updateLanguage,
+        isLanguageSelected
+    }
+}

src/components/desktop/LanguageSelectButton.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-menu location="bottom" max-height="500">
+        <template #activator="{ props }">
+            <v-btn variant="text" :disabled="disabled" v-bind="props">{{ currentLanguageName }}</v-btn>
+        </template>
+        <v-list>
+            <v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
+                <v-list-item-title class="cursor-pointer" @click="updateLanguage(lang.languageTag)">
+                    <div class="d-flex align-center">
+                        <span>{{ lang.nativeDisplayName }}</span>
+                        <v-spacer style="min-width: 40px" />
+                        <v-icon :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
+                        <span class="text-field-append-text" v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
+                    </div>
+                </v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script setup lang="ts">
+import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+
+import {
+    mdiCheck
+} from '@mdi/js';
+
+const props = defineProps<LanguageSelectButtonBaseProps>();
+const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+
+const {
+    allLanguages,
+    currentLanguageName,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+</script>

src/components/mobile/LanguageSelectButton.vue

@@ -0,0 +1,32 @@
+<template>
+    <f7-button small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
+
+    <f7-popover class="lang-popover-menu">
+        <f7-list dividers>
+            <f7-list-item link="#" no-chevron popover-close
+                          :key="lang.languageTag"
+                          :title="lang.nativeDisplayName"
+                          v-for="lang in allLanguages"
+                          @click="updateLanguage(lang.languageTag)">
+                <template #after>
+                    <f7-icon class="list-item-checked-icon" f7="checkmark_alt" v-if="isLanguageSelected(lang.languageTag)"></f7-icon>
+                    <span v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
+                </template>
+            </f7-list-item>
+        </f7-list>
+    </f7-popover>
+</template>
+
+<script setup lang="ts">
+import { type LanguageSelectButtonBaseProps, type LanguageSelectButtonBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectButtonBase.ts';
+
+const props = defineProps<LanguageSelectButtonBaseProps>();
+const emit = defineEmits<LanguageSelectButtonBaseEmits>();
+
+const {
+    allLanguages,
+    currentLanguageName,
+    updateLanguage,
+    isLanguageSelected
+} = useLanguageSelectButtonBase(props, emit);
+</script>

src/components/mobile/ListItemSelectionSheet.vue

@@ -14,6 +14,7 @@
                 <f7-list-item link="#" no-chevron
                               :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
                               :value="getItemValue(item, index, valueField, valueType)"
+                              :after="ti((afterField ? (item as Record<string, unknown>)[afterField] : item) as string, !!afterI18n)"
                               :class="{ 'list-item-selected': isSelected(item, index) }"
                               :key="getItemValue(item, index, keyField, valueType)"
                               v-for="(item, index) in items"
@@ -45,6 +46,8 @@ const props = defineProps<{
     valueField?: string; // for value type == item
     titleField: string;
     titleI18n?: boolean;
+    afterField: string;
+    afterI18n?: boolean;
     iconField?: string;
     iconType?: string;
     colorField?: string;