Seekra/frontend
3
2
Fork 0
generated from Seekra/repository-template
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Add more Languages and switch button #70

Merged
jakob.scheid merged 22 commits from feature/add-languages into main 2026-05-22 17:19:25 +02:00
Conversation 13 Commits 22 Files Changed 11
+46 -61
8 changed files with 46 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit abbfd0ad9d - Show all commits
src/features/i18n/components/LanguageSwitchButton.vue
+9 -24
View File
@@ -15,28 +15,15 @@ limitations under the License.
-->
<script setup>
import { ref, computed } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { loadLanguage, LANGUAGES_RTL } from '@/i18n';
import { loadLanguage, LANGUAGES_RTL, SUPPORTED_LANGUAGES } from '@/i18n';
const { t, locale } = useI18n();
const isOpen = ref(false);
const languageDropdown = ref(null);
const languages = [
{ code: 'en', flag: '🇬🇧' },
{ code: 'de', flag: '🇩🇪' },
{ code: 'fr', flag: '🇫🇷' },
{ code: 'es', flag: '🇪🇸' },
{ code: 'it', flag: '🇮🇹' },
{ code: 'pt', flag: '🇵🇹' },
];
const currentLanguage = computed(
() => languages.find(l => l.code === locale.value) ?? languages[0]
);
async function selectLanguage(code) {
await loadLanguage(code);
localStorage.setItem('locale', code);
@@ -76,22 +63,20 @@ const open = function () {
:aria-expanded="isOpen"
aria-haspopup="listbox"
>
<span class="flag">{{ currentLanguage.flag }}</span>
<span class="lang-code">{{ currentLanguage.code.toUpperCase() }}</span>
<span class="lang-code">{{ t(`preferences.locale.languages.${locale}`) }}</span>
<span class="chevron" :class="{ open: isOpen }">▾</span>
</button>
<ul v-if="isOpen" ref="languageDropdown" class="language-dropdown" role="listbox">
<li
v-for="lang in languages"
:key="lang.code"
v-for="lang in SUPPORTED_LANGUAGES"
:key="lang"
role="option"
:aria-selected="lang.code === locale"
:class="{ active: lang.code === locale }"
@click="selectLanguage(lang.code)"
:aria-selected="lang === locale"
:class="{ active: lang === locale }"
@click="selectLanguage(lang)"
>
<span class="flag">{{ lang.flag }}</span>
<span class="lang-label">{{ t(`preferences.locale.languages.${lang.code}`) }}</span>
<span class="lang-label">{{ t(`preferences.locale.languages.${lang}`) }}</span>
</li>
</ul>
</div>
1
src/i18n.js
+1 -1
View File
@@ -23,7 +23,7 @@ export const fallbackLocale = 'en';
export const LANGUAGES_RTL = [
'ar'
];
const SUPPORTED_LANGUAGES = [
export const SUPPORTED_LANGUAGES = [
'en',
'de',
'fr',
src/locales/de.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},
src/locales/en.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},
src/locales/es.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},
src/locales/fr.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},
src/locales/it.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},
src/locales/pt.json
+6 -6
View File
@@ -27,12 +27,12 @@
},
"locale": {
"languages": {
"en": "English",
"de": "Deutsch",
"fr": "Français",
"es": "Español",
"it": "Italiano",
"pt": "Português"
"en": "🇬🇧 English",
"de": "🇩🇪 Deutsch",
"fr": "🇫🇷 Français",
"es": "🇪🇸 Español",
"it": "🇮🇹 Italiano",
"pt": "🇵🇹 Português"
}
}
},