mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 07:27:33 +08:00
modify language select style
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user