modify language select style

This commit is contained in:
MaysWind
2025-03-07 01:47:27 +08:00
parent 47f70098df
commit beeeb1c059
25 changed files with 250 additions and 251 deletions
@@ -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>
@@ -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;