feat: add I18nLocaleDropdown

components.d.ts

@@ -283,6 +283,8 @@ declare module 'vue' {
     FormStepsGroup: typeof import('./src/components/Form/FormStepsGroup/FormStepsGroup.vue')['default']
     FormStepsGroupToggler: typeof import('./src/components/Form/FormStepsGroup/FormStepsGroupToggler.vue')['default']
     Hook: typeof import('./src/components/Hook.vue')['default']
+    I18nLocaleDropdown: typeof import('./src/components/I18n/I18nLocaleDropdown.vue')['default']
+    I18nLocalesDropdown: typeof import('./src/components/I18n/I18nLocalesDropdown.vue')['default']
     ImageMode: typeof import('./src/components/ImageMode/ImageMode.vue')['default']
     ImageModeSource: typeof import('./src/components/ImageMode/ImageModeSource.vue')['default']
     InlineDirectoryPicker: typeof import('./src/components/InlineDirectoryPicker.vue')['default']

src/components/I18n/I18nLocaleDropdown.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { uniqueId, find } from 'lodash'
+import { PhosphorIcon } from '@icij/murmur-next'
+import { useI18n } from 'vue-i18n'
+
+import { useCore } from '@/composables/core'
+import settings from '@/utils/settings'
+
+defineProps({
+  popoverPlacement: {
+    type: String,
+    default: 'right'
+  }
+})
+
+const { locale } = useI18n()
+const { core } = useCore()
+
+const id = uniqueId('i18n-locale-dropdown')
+const popover = ref(null)
+const currentLocale = computed(() => find(settings.locales, { key: locale.value }))
+// Watch for changes in the current locale and load the locale
+watch(currentLocale, ({ key }) => core?.loadI18Locale(key))
+
+const chooseLocale = async (localeKey) => {
+  if (popover.value?.hide) {
+    popover.value.hide(new Event('forceHide'))
+  }
+  await core?.loadI18Locale(localeKey)
+}
+
+const dropdownItemClass = (key) => {
+  return {
+    active: key === currentLocale.value.key,
+    [`dropdown-item--${key.toLowerCase()}`]: true
+  }
+}
+</script>
+
+<template>
+  <b-button :id="id" class="i18n-locale-dropdown" href="#" :variant="null" @click.prevent>
+    <span class="i18n-locale-dropdown__button">
+      <slot v-bind="{ currentLocale, locales: settings.locales }">
+        <phosphor-icon name="globe-hemisphere-west" class="me-1" />
+        {{ currentLocale.label }}
+      </slot>
+    </span>
+    <teleport to="body">
+      <b-popover
+        ref="popover"
+        click
+        :placement="popoverPlacement"
+        :target="id"
+        custom-class="i18n-locale-dropdown__list popover-body-p-0"
+      >
+        <div class="dropdown-menu show position-static border-0 px-2 bg-transparent">
+          <a
+            v-for="{ key, label } in settings.locales"
+            :key="key"
+            href="#"
+            class="dropdown-item"
+            :class="dropdownItemClass(key)"
+            @click.prevent="chooseLocale(key)"
+          >
+            {{ label }}
+          </a>
+        </div>
+      </b-popover>
+    </teleport>
+  </b-button>
+</template>

src/components/Login/LoginLocaleDropdownSelector.vue

@@ -1,12 +1,12 @@
 <script setup>
-import LocalesMenu from '@/components/LocalesMenu'
+import I18nLocaleDropdown from '@/components/I18n/I18nLocaleDropdown'
 </script>
 
 <template>
   <span class="login-locale-dropdown-selector d-inline-flex gap-1 text-secondary-emphasis align-items-center">
     <span class="p-1">
       {{ $t('loginLocaleDropdownSelector.label') }}
     </span>
-    <locales-menu class="p-1" popover-placement="top" />
+    <i18n-locale-dropdown class="p-1" popover-placement="top" />
   </span>
 </template>