58 lines
1.5 KiB
Vue
58 lines
1.5 KiB
Vue
<template>
|
|
<button
|
|
class="flex h-7 cursor-pointer items-center rounded text-ink-gray-7 duration-300 ease-in-out focus:outline-none hover:bg-surface-gray-2"
|
|
@click="toggleLocale"
|
|
>
|
|
<div
|
|
class="flex w-full items-center justify-between duration-300 ease-in-out"
|
|
:class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'"
|
|
>
|
|
<div class="flex items-center truncate">
|
|
<Tooltip :text="currentLocaleLabel" placement="right" :disabled="!isCollapsed">
|
|
<span class="grid flex-shrink-0 place-items-center">
|
|
<FeatherIcon name="globe" class="h-4 w-4 text-ink-gray-7" />
|
|
</span>
|
|
</Tooltip>
|
|
<span
|
|
class="flex-1 flex-shrink-0 truncate text-sm duration-300 ease-in-out"
|
|
:class="
|
|
isCollapsed
|
|
? 'ml-0 w-0 overflow-hidden opacity-0'
|
|
: 'ml-2 w-auto opacity-100'
|
|
"
|
|
>
|
|
{{ currentLocaleLabel }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { Tooltip, FeatherIcon } from 'frappe-ui'
|
|
|
|
defineProps({
|
|
isCollapsed: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
|
|
const { locale } = useI18n()
|
|
|
|
const locales = {
|
|
en: 'English',
|
|
ru: 'Русский',
|
|
}
|
|
|
|
const currentLocaleLabel = computed(() => locales[locale.value] || locale.value)
|
|
|
|
function toggleLocale() {
|
|
const newLocale = locale.value === 'ru' ? 'en' : 'ru'
|
|
locale.value = newLocale
|
|
localStorage.setItem('admin-panel-locale', newLocale)
|
|
}
|
|
</script>
|