skytek_xinliang
74 lines
2.2 KiB
Vue
74 lines
2.2 KiB
Vue
<template>
|
|
<div class="d-flex justify-end py-0 py-sm-2">
|
|
<v-btn
|
|
class="d-none d-md-block" color="grey-darken-1" :icon="mdiPaletteOutline" size="small" variant="text"
|
|
@click="toggleTheme"></v-btn>
|
|
<!-- <v-btn :icon="mdiDockWindow" variant="text" size="small" color="grey-darken-1" @click="handleToggleLayout"></v-btn> -->
|
|
<v-menu location="bottom end">
|
|
<template #activator="{ props: menuActivatorProps }">
|
|
<v-btn
|
|
v-bind="menuActivatorProps" color="grey-darken-1" :icon="mdiTranslate" size="small"
|
|
variant="text"></v-btn>
|
|
</template>
|
|
<v-list density="compact">
|
|
<v-list-item
|
|
v-for="locale in localeOptions" :key="locale" :active="locale === props.locale"
|
|
@click="handleSelectLocale(locale)">
|
|
<v-list-item-title>{{ localeLabels[locale] ?? locale }}</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
<!-- <v-btn :icon="mdiWeatherNight" variant="text" size="small" color="grey-darken-1"></v-btn> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { mdiDockWindow, mdiPaletteOutline, mdiTranslate, mdiWeatherNight } from '@mdi/js'
|
|
import { computed } from 'vue'
|
|
import { useTheme } from 'vuetify'
|
|
import { getNextThemeName } from '@/utils/theme'
|
|
|
|
interface Props {
|
|
locale?: string
|
|
locales?: string[]
|
|
localeLabels?: Record<string, string>
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
locale: 'zh-TW',
|
|
locales: () => ['zh-TW', 'en-US'],
|
|
localeLabels: () => ({
|
|
'en-US': 'English',
|
|
'zh-TW': '中文',
|
|
}),
|
|
})
|
|
|
|
const emit = defineEmits(['change-locale', 'toggle-layout'])
|
|
|
|
const theme = useTheme()
|
|
|
|
const availableThemeNames = computed(() =>
|
|
Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
|
|
)
|
|
|
|
function toggleTheme () {
|
|
const names = availableThemeNames.value
|
|
if (names.length === 0) return
|
|
|
|
const current = theme.global.name.value
|
|
const next = getNextThemeName(names, current)
|
|
if (!next) return
|
|
theme.change(next)
|
|
}
|
|
|
|
const localeOptions = computed(() =>
|
|
props.locales.length > 0 ? props.locales : ['zh-TW', 'en-US']
|
|
)
|
|
|
|
function handleSelectLocale (locale: string) {
|
|
if (locale === props.locale) return
|
|
emit('change-locale', locale)
|
|
}
|
|
|
|
</script>
|