feat(App.vue): update locale select options to display language names…

… instead of locale codes feat(language.ts): add sortedLocales function to sort locales alphabetically
lyqht · Aug 2, 2023 · 0c8193a · 0c8193a
1 parent 6701c67
commit 0c8193a
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 7 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -25,5 +25,35 @@
     "classy-rounded": "classy-rounded",
     "square": "square",
     "extra-rounded": "extra-rounded",
-    "dot": "dot"
+    "dot": "dot",
+    "bg": "Bulgarian",
+    "cs": "Czech",
+    "da": "Danish",
+    "de": "German",
+    "el": "Greek",
+    "en": "English",
+    "es": "Spanish",
+    "et": "Estonian",
+    "fi": "Finnish",
+    "fr": "French",
+    "hu": "Hungarian",
+    "id": "Indonesian",
+    "it": "Italian",
+    "ja": "Japanese",
+    "ko": "Korean",
+    "lt": "Lithuanian",
+    "lv": "Latvian",
+    "nb": "Norwegian Bokmål",
+    "nl": "Dutch",
+    "pl": "Polish",
+    "ptBR": "Portuguese (Brazil)",
+    "ptPT": "Portuguese (Portugal)",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "sk": "Slovak",
+    "sl": "Slovenian",
+    "sv": "Swedish",
+    "tr": "Turkish",
+    "uk": "Ukrainian",
+    "zh": "Chinese"
 }
diff --git a/src/App.vue b/src/App.vue
@@ -2,13 +2,14 @@
 import PLACEHOLDER_IMAGE_URL from '@/assets/placeholder_image.png'
 import StyledQRCode, { type StyledQRCodeProps } from '@/components/StyledQRCode.vue'
 import {
-  copyImageToClipboard,
-  downloadPngElement,
-  downloadSvgElement
+copyImageToClipboard,
+downloadPngElement,
+downloadSvgElement
 } from '@/utils/convertToImage'
 import type { CornerDotType, CornerSquareType, DotType } from 'qr-code-styling'
 import { computed, ref } from 'vue'
 import 'vue-i18n'
+import { sortedLocales } from './utils/language'
 
 interface CustomStyleProps {
   borderRadius?: string
@@ -222,7 +223,7 @@ function loadQrConfig() {
 </script>
 
 <template>
-  <main class="grid place-items-center px-6 py-16 sm:p-8 relative" role="main">
+  <main class="grid place-items-center px-6 py-20 sm:p-8 relative" role="main">
     <div class="absolute end-4 top-4 flex flex-row items-center gap-4">
       <form class="flex flex-row items-center">
         <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24">
@@ -240,8 +241,8 @@ function loadQrConfig() {
           </g>
         </svg>
         <select class="input px-0 text-center" id="locale-select" v-model="$i18n.locale">
-          <option v-for="(locale, index) in $i18n.availableLocales" :key="index" :value="locale">
-            {{ locale }}
+          <option v-for="(locale, index) in sortedLocales" :key="index" :value="locale">
+            {{ $t(locale) }}
           </option>
         </select>
       </form>

diff --git a/src/utils/language.ts b/src/utils/language.ts
@@ -0,0 +1,35 @@
+const languageMap: Record<string, string> = {
+  bg: 'Bulgarian',
+  cs: 'Czech',
+  da: 'Danish',
+  de: 'German',
+  el: 'Greek',
+  en: 'English',
+  es: 'Spanish',
+  et: 'Estonian',
+  fi: 'Finnish',
+  fr: 'French',
+  hu: 'Hungarian',
+  id: 'Indonesian',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  lt: 'Lithuanian',
+  lv: 'Latvian',
+  nb: 'Norwegian Bokmål',
+  nl: 'Dutch',
+  pl: 'Polish',
+  ptBR: 'Portuguese (Brazil)',
+  ptPT: 'Portuguese (Portugal)',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sk: 'Slovak',
+  sl: 'Slovenian',
+  sv: 'Swedish',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  zh: 'Chinese'
+}
+export const sortedLocales = Object.keys(languageMap).sort((a, b) => {
+  return languageMap[a].localeCompare(languageMap[b]);
+});