fix: RTL Settings Ignored (#5762)

dev/code-generation/gen_ts_locales.py

@@ -179,9 +179,15 @@ def inject_nuxt_values():
 
     all_langs = []
     for match in locales_dir.glob("*.json"):
-        lang_string = f'{{ code: "{match.stem}", file: "{match.name.replace(".json", ".ts")}" }},'
+        match_data = LOCALE_DATA.get(match.stem)
+        match_dir = match_data.dir if match_data else "ltr"
+
+        lang_string = f'{{ code: "{match.stem}", file: "{match.name.replace(".json", ".ts")}", dir: "{match_dir}" }},'
         all_langs.append(lang_string)
 
+    all_langs.sort()
+    all_date_locales.sort()
+
     log.debug(f"injecting locales into nuxt config -> {nuxt_config}")
     inject_inline(nuxt_config, CodeKeys.nuxt_local_messages, all_langs)
     inject_inline(i18n_config, CodeKeys.nuxt_local_dates, all_date_locales)

frontend/components/global/LanguageDialog.vue

@@ -7,13 +7,14 @@
     <v-card-text>
       {{ $t("language-dialog.select-description") }}
       <v-autocomplete
-        v-model="locale"
+        v-model="selectedLocale"
         :items="locales"
         item-title="name"
+        item-value="value"
         class="my-3"
         hide-details
         variant="outlined"
-        offset
+        @update:model-value="onLocaleSelect"
       >
         <template #item="{ item, props }">
           <div
@@ -59,6 +60,14 @@ export default defineNuxtComponent({
     });
 
     const { locales: LOCALES, locale, i18n } = useLocales();
+
+    const selectedLocale = ref(locale.value);
+    const onLocaleSelect = (value: string) => {
+      if (value && locales.some(l => l.value === value)) {
+        locale.value = value as any;
+      }
+    };
+
     watch(locale, () => {
       dialog.value = false; // Close dialog when locale changes
     });
@@ -72,6 +81,8 @@ export default defineNuxtComponent({
       i18n,
       locales,
       locale,
+      selectedLocale,
+      onLocaleSelect,
     };
   },
 });

frontend/composables/use-locales/use-locales.ts

@@ -3,8 +3,6 @@ import { LOCALES } from "./available-locales";
 
 export const useLocales = () => {
   const i18n = useI18n();
-
-  const { isRtl } = useRtl();
   const { current: vuetifyLocale } = useLocale();
 
   const locale = computed<LocaleObject["code"]>({
@@ -13,18 +11,21 @@ export const useLocales = () => {
       i18n.setLocale(value);
     },
   });
+
+  function updateLocale(lc: LocaleObject["code"]) {
+    vuetifyLocale.value = lc;
+  }
+
   // auto update vuetify locale
   watch(locale, (lc) => {
-    vuetifyLocale.value = lc;
+    updateLocale(lc);
-  });
-  // auto update rtl
-  watch(vuetifyLocale, (vl) => {
-    const currentLocale = LOCALES.find(lc => lc.value === vl);
-    if (currentLocale) {
-      isRtl.value = currentLocale.dir === "rtl";
-    }
   });
 
+  // set initial locale
+  if (i18n.locale.value) {
+    updateLocale(i18n.locale.value);
+  };
+
   return {
     locale,
     locales: LOCALES,

frontend/i18n.config.ts

@@ -1,47 +1,48 @@
 /* eslint-disable @typescript-eslint/no-require-imports */
 const datetimeFormats = {
   // CODE_GEN_ID: DATE_LOCALES
-  "tr-TR": require("./lang/dateTimeFormats/tr-TR.json"),
+  "af-ZA": require("./lang/dateTimeFormats/af-ZA.json"),
-  "zh-CN": require("./lang/dateTimeFormats/zh-CN.json"),
+  "ar-SA": require("./lang/dateTimeFormats/ar-SA.json"),
-  "ja-JP": require("./lang/dateTimeFormats/ja-JP.json"),
+  "bg-BG": require("./lang/dateTimeFormats/bg-BG.json"),
-  "en-GB": require("./lang/dateTimeFormats/en-GB.json"),
   "ca-ES": require("./lang/dateTimeFormats/ca-ES.json"),
+  "cs-CZ": require("./lang/dateTimeFormats/cs-CZ.json"),
+  "da-DK": require("./lang/dateTimeFormats/da-DK.json"),
+  "de-DE": require("./lang/dateTimeFormats/de-DE.json"),
+  "el-GR": require("./lang/dateTimeFormats/el-GR.json"),
+  "en-GB": require("./lang/dateTimeFormats/en-GB.json"),
+  "en-US": require("./lang/dateTimeFormats/en-US.json"),
+  "es-ES": require("./lang/dateTimeFormats/es-ES.json"),
+  "et-EE": require("./lang/dateTimeFormats/et-EE.json"),
+  "fi-FI": require("./lang/dateTimeFormats/fi-FI.json"),
+  "fr-BE": require("./lang/dateTimeFormats/fr-BE.json"),
+  "fr-CA": require("./lang/dateTimeFormats/fr-CA.json"),
+  "fr-FR": require("./lang/dateTimeFormats/fr-FR.json"),
+  "gl-ES": require("./lang/dateTimeFormats/gl-ES.json"),
+  "he-IL": require("./lang/dateTimeFormats/he-IL.json"),
+  "hr-HR": require("./lang/dateTimeFormats/hr-HR.json"),
+  "hu-HU": require("./lang/dateTimeFormats/hu-HU.json"),
+  "is-IS": require("./lang/dateTimeFormats/is-IS.json"),
   "it-IT": require("./lang/dateTimeFormats/it-IT.json"),
+  "ja-JP": require("./lang/dateTimeFormats/ja-JP.json"),
+  "ko-KR": require("./lang/dateTimeFormats/ko-KR.json"),
+  "lt-LT": require("./lang/dateTimeFormats/lt-LT.json"),
+  "lv-LV": require("./lang/dateTimeFormats/lv-LV.json"),
+  "nl-NL": require("./lang/dateTimeFormats/nl-NL.json"),
+  "no-NO": require("./lang/dateTimeFormats/no-NO.json"),
   "pl-PL": require("./lang/dateTimeFormats/pl-PL.json"),
+  "pt-BR": require("./lang/dateTimeFormats/pt-BR.json"),
   "pt-PT": require("./lang/dateTimeFormats/pt-PT.json"),
   "ro-RO": require("./lang/dateTimeFormats/ro-RO.json"),
-  "sr-SP": require("./lang/dateTimeFormats/sr-SP.json"),
-  "hr-HR": require("./lang/dateTimeFormats/hr-HR.json"),
-  "de-DE": require("./lang/dateTimeFormats/de-DE.json"),
-  "zh-TW": require("./lang/dateTimeFormats/zh-TW.json"),
-  "af-ZA": require("./lang/dateTimeFormats/af-ZA.json"),
-  "fr-CA": require("./lang/dateTimeFormats/fr-CA.json"),
-  "he-IL": require("./lang/dateTimeFormats/he-IL.json"),
-  "pt-BR": require("./lang/dateTimeFormats/pt-BR.json"),
-  "cs-CZ": require("./lang/dateTimeFormats/cs-CZ.json"),
-  "fr-FR": require("./lang/dateTimeFormats/fr-FR.json"),
   "ru-RU": require("./lang/dateTimeFormats/ru-RU.json"),
-  "is-IS": require("./lang/dateTimeFormats/is-IS.json"),
   "sk-SK": require("./lang/dateTimeFormats/sk-SK.json"),
-  "el-GR": require("./lang/dateTimeFormats/el-GR.json"),
-  "fr-BE": require("./lang/dateTimeFormats/fr-BE.json"),
-  "da-DK": require("./lang/dateTimeFormats/da-DK.json"),
-  "hu-HU": require("./lang/dateTimeFormats/hu-HU.json"),
-  "es-ES": require("./lang/dateTimeFormats/es-ES.json"),
-  "gl-ES": require("./lang/dateTimeFormats/gl-ES.json"),
-  "no-NO": require("./lang/dateTimeFormats/no-NO.json"),
-  "lt-LT": require("./lang/dateTimeFormats/lt-LT.json"),
-  "en-US": require("./lang/dateTimeFormats/en-US.json"),
-  "sv-SE": require("./lang/dateTimeFormats/sv-SE.json"),
-  "ko-KR": require("./lang/dateTimeFormats/ko-KR.json"),
-  "bg-BG": require("./lang/dateTimeFormats/bg-BG.json"),
   "sl-SI": require("./lang/dateTimeFormats/sl-SI.json"),
+  "sr-SP": require("./lang/dateTimeFormats/sr-SP.json"),
+  "sv-SE": require("./lang/dateTimeFormats/sv-SE.json"),
+  "tr-TR": require("./lang/dateTimeFormats/tr-TR.json"),
   "uk-UA": require("./lang/dateTimeFormats/uk-UA.json"),
-  "lv-LV": require("./lang/dateTimeFormats/lv-LV.json"),
-  "ar-SA": require("./lang/dateTimeFormats/ar-SA.json"),
-  "nl-NL": require("./lang/dateTimeFormats/nl-NL.json"),
   "vi-VN": require("./lang/dateTimeFormats/vi-VN.json"),
-  "fi-FI": require("./lang/dateTimeFormats/fi-FI.json"),
+  "zh-CN": require("./lang/dateTimeFormats/zh-CN.json"),
+  "zh-TW": require("./lang/dateTimeFormats/zh-TW.json"),
   // END: DATE_LOCALES
 };
 

frontend/lang/dateTimeFormats/et-EE.json

@@ -0,0 +1,21 @@
+{
+  "short": {
+    "month": "short",
+    "day": "numeric",
+    "weekday": "long"
+  },
+  "medium": {
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "year": "numeric"
+  },
+  "long": {
+    "year": "numeric",
+    "month": "long",
+    "day": "numeric",
+    "weekday": "long",
+    "hour": "numeric",
+    "minute": "numeric"
+  }
+}

frontend/nuxt.config.ts

@@ -175,114 +175,52 @@ export default defineNuxtConfig({
       subsets: ["cyrillic-ext", "cyrillic", "greek-ext", "greek", "vietnamese", "latin-ext", "latin"],
     },
   },
-  /* auth: {
-    redirect: {
-      login: "/login",
-      logout: "/login",
-      callback: "/login",
-      home: "/",
-    },
-    cookie: {
-      prefix: "mealie.auth.",
-      options: {
-        expires: 7,
-        path: "/",
-      },
-    },
-    rewriteRedirects: false,
-    // Options
-    strategies: {
-      local: {
-        resetOnError: true,
-        token: {
-          property: "access_token",
-          global: true,
-          // required: true,
-          // type: 'Bearer'
-        },
-        user: {
-          property: "",
-          autoFetch: true,
-        },
-        endpoints: {
-          login: {
-            url: "api/auth/token",
-            method: "post",
-            propertyName: "access_token",
-          },
-          refresh: { url: "api/auth/refresh", method: "post" },
-          logout: { url: "api/auth/logout", method: "post" },
-          user: { url: "api/users/self", method: "get" },
-        },
-      },
-      oidc: {
-        scheme: "local",
-        resetOnError: true,
-        token: {
-          property: "access_token",
-          global: true,
-        },
-        user: {
-          property: "",
-          autoFetch: true,
-        },
-        endpoints: {
-          login: {
-            url: "api/auth/oauth/callback",
-            method: "get",
-          },
-          logout: { url: "api/auth/logout", method: "post" },
-          user: { url: "api/users/self", method: "get" },
-        },
-      },
-    },
-  }, */
 
   i18n: {
     locales: [
       // CODE_GEN_ID: MESSAGE_LOCALES
-      { code: "tr-TR", file: "tr-TR.ts" },
+      { code: "af-ZA", file: "af-ZA.ts", dir: "ltr" },
-      { code: "zh-CN", file: "zh-CN.ts" },
+      { code: "ar-SA", file: "ar-SA.ts", dir: "rtl" },
-      { code: "ja-JP", file: "ja-JP.ts" },
+      { code: "bg-BG", file: "bg-BG.ts", dir: "ltr" },
-      { code: "en-GB", file: "en-GB.ts" },
+      { code: "ca-ES", file: "ca-ES.ts", dir: "ltr" },
-      { code: "ca-ES", file: "ca-ES.ts" },
+      { code: "cs-CZ", file: "cs-CZ.ts", dir: "ltr" },
-      { code: "it-IT", file: "it-IT.ts" },
+      { code: "da-DK", file: "da-DK.ts", dir: "ltr" },
-      { code: "pl-PL", file: "pl-PL.ts" },
+      { code: "de-DE", file: "de-DE.ts", dir: "ltr" },
-      { code: "pt-PT", file: "pt-PT.ts" },
+      { code: "el-GR", file: "el-GR.ts", dir: "ltr" },
-      { code: "ro-RO", file: "ro-RO.ts" },
+      { code: "en-GB", file: "en-GB.ts", dir: "ltr" },
-      { code: "sr-SP", file: "sr-SP.ts" },
+      { code: "en-US", file: "en-US.ts", dir: "ltr" },
-      { code: "hr-HR", file: "hr-HR.ts" },
+      { code: "es-ES", file: "es-ES.ts", dir: "ltr" },
-      { code: "de-DE", file: "de-DE.ts" },
+      { code: "et-EE", file: "et-EE.ts", dir: "ltr" },
-      { code: "zh-TW", file: "zh-TW.ts" },
+      { code: "fi-FI", file: "fi-FI.ts", dir: "ltr" },
-      { code: "af-ZA", file: "af-ZA.ts" },
+      { code: "fr-BE", file: "fr-BE.ts", dir: "ltr" },
-      { code: "fr-CA", file: "fr-CA.ts" },
+      { code: "fr-CA", file: "fr-CA.ts", dir: "ltr" },
-      { code: "he-IL", file: "he-IL.ts" },
+      { code: "fr-FR", file: "fr-FR.ts", dir: "ltr" },
-      { code: "pt-BR", file: "pt-BR.ts" },
+      { code: "gl-ES", file: "gl-ES.ts", dir: "ltr" },
-      { code: "cs-CZ", file: "cs-CZ.ts" },
+      { code: "he-IL", file: "he-IL.ts", dir: "rtl" },
-      { code: "fr-FR", file: "fr-FR.ts" },
+      { code: "hr-HR", file: "hr-HR.ts", dir: "ltr" },
-      { code: "ru-RU", file: "ru-RU.ts" },
+      { code: "hu-HU", file: "hu-HU.ts", dir: "ltr" },
-      { code: "is-IS", file: "is-IS.ts" },
+      { code: "is-IS", file: "is-IS.ts", dir: "ltr" },
-      { code: "sk-SK", file: "sk-SK.ts" },
+      { code: "it-IT", file: "it-IT.ts", dir: "ltr" },
-      { code: "el-GR", file: "el-GR.ts" },
+      { code: "ja-JP", file: "ja-JP.ts", dir: "ltr" },
-      { code: "fr-BE", file: "fr-BE.ts" },
+      { code: "ko-KR", file: "ko-KR.ts", dir: "ltr" },
-      { code: "da-DK", file: "da-DK.ts" },
+      { code: "lt-LT", file: "lt-LT.ts", dir: "ltr" },
-      { code: "hu-HU", file: "hu-HU.ts" },
+      { code: "lv-LV", file: "lv-LV.ts", dir: "ltr" },
-      { code: "es-ES", file: "es-ES.ts" },
+      { code: "nl-NL", file: "nl-NL.ts", dir: "ltr" },
-      { code: "gl-ES", file: "gl-ES.ts" },
+      { code: "no-NO", file: "no-NO.ts", dir: "ltr" },
-      { code: "no-NO", file: "no-NO.ts" },
+      { code: "pl-PL", file: "pl-PL.ts", dir: "ltr" },
-      { code: "lt-LT", file: "lt-LT.ts" },
+      { code: "pt-BR", file: "pt-BR.ts", dir: "ltr" },
-      { code: "en-US", file: "en-US.ts" },
+      { code: "pt-PT", file: "pt-PT.ts", dir: "ltr" },
-      { code: "sv-SE", file: "sv-SE.ts" },
+      { code: "ro-RO", file: "ro-RO.ts", dir: "ltr" },
-      { code: "ko-KR", file: "ko-KR.ts" },
+      { code: "ru-RU", file: "ru-RU.ts", dir: "ltr" },
-      { code: "bg-BG", file: "bg-BG.ts" },
+      { code: "sk-SK", file: "sk-SK.ts", dir: "ltr" },
-      { code: "sl-SI", file: "sl-SI.ts" },
+      { code: "sl-SI", file: "sl-SI.ts", dir: "ltr" },
-      { code: "uk-UA", file: "uk-UA.ts" },
+      { code: "sr-SP", file: "sr-SP.ts", dir: "ltr" },
-      { code: "et-EE", file: "et-EE.ts" },
+      { code: "sv-SE", file: "sv-SE.ts", dir: "ltr" },
-      { code: "lv-LV", file: "lv-LV.ts" },
+      { code: "tr-TR", file: "tr-TR.ts", dir: "ltr" },
-      { code: "ar-SA", file: "ar-SA.ts" },
+      { code: "uk-UA", file: "uk-UA.ts", dir: "ltr" },
-      { code: "nl-NL", file: "nl-NL.ts" },
+      { code: "vi-VN", file: "vi-VN.ts", dir: "ltr" },
-      { code: "vi-VN", file: "vi-VN.ts" },
+      { code: "zh-CN", file: "zh-CN.ts", dir: "ltr" },
-      { code: "fi-FI", file: "fi-FI.ts" },
+      { code: "zh-TW", file: "zh-TW.ts", dir: "ltr" },
       // END: MESSAGE_LOCALES
     ],
     strategy: "no_prefix",