opnform/resources/js/components/LocaleDropdown.vue

42 lines
1.3 KiB
Vue
Raw Normal View History

2022-09-20 19:59:52 +00:00
<template>
<Dropdown v-if="Object.keys(locales).length > 1"
dropdown-class="origin-top-right absolute right-0 mt-2 w-20 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5">
<template #trigger="{toggle}">
<a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#" role="button" @click.prevent="toggle"
>
{{ locales[locale] }}
</a>
</template>
<a v-for="(value, key) in locales" :key="key" class="block block text-center px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center z-10" href="#"
@click.prevent="setLocale(key)"
>
{{ value }}
</a>
</Dropdown>
</template>
<script>
import { mapGetters } from 'vuex'
import { loadMessages } from '~/plugins/i18n.js'
import Dropdown from './common/Dropdown.vue'
2022-09-20 19:59:52 +00:00
export default {
components: { Dropdown },
computed: mapGetters({
locale: 'lang/locale',
locales: 'lang/locales'
}),
methods: {
setLocale (locale) {
if (this.$i18n.locale !== locale) {
loadMessages(locale)
this.$store.dispatch('lang/setLocale', { locale })
}
}
}
}
</script>