Update ChangeLocale.vue

Author: atomjoy

vue/resources/js/components/ChangeLocale.vue

@@ -1,82 +1,104 @@
-<!--
-// https://vue-i18n.intlify.dev/guide/advanced/composition.html#global-scope
-// Add in main i18n options main.js
-
-import { createI18n } from 'vue-i18n'
-
-const lang = {
-  // Allow compositions api (required)
-  allowComposition: true,
-  globalInjection: true,
-  legacy: false,
-
-  // Locales
-  locale: 'en',
-  fallbackLocale: 'en',
-  availableLocales: ['en', 'pl'],
-  messages: {
-    en: { en: "English", pl: "Polish" },
-    pl: { en: "Angielski", pl: "Polski" },
-  },
-}
-
-const i18n = createI18n(lang)
-app.use(i18n)
--->
-
 <template>
-	<div class="locale-changer">
-		<select v-model="locale" class="locale-changer-select">
-			<option v-for="lang in availableLocales" :key="`locale-${lang}`" :value="lang">{{ t(lang) }}</option>
+	<div class="change-locale">
+		<select v-model="locale" class="locale-select">
+			<option v-for="lang in availableLocales" :key="`locale-${lang}`" :value="lang">
+				{{ t(lang) }}
+			</option>
 		</select>
 	</div>
 </template>
 
 <script setup>
-import { watch, computed, onMounted } from 'vue'
-import { useAuthStore } from '@/stores/auth.js'
+import axios from 'axios'
 import { useI18n } from 'vue-i18n'
+import { watch, onMounted } from 'vue'
 
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
-const store = useAuthStore()
+
+const props = defineProps({
+	locale_url: { default: '/web/api/locale/' },
+})
 
 onMounted(() => {
-	console.log('Current locale', locale.value, availableLocales)
+	console.log('Change locale', locale.value, availableLocales)
 })
 
 watch(
 	() => locale.value,
 	(lang) => {
-		console.log('Changed locale', lang)
-		store.changeLocale(lang)
+		changeLocale(lang)
 	}
 )
 
-const msg = computed(() => t('example.msg'))
+async function changeLocale(locale) {
+	if (props.locale_url) {
+		try {
+			// Server update
+			// await axios.get(props.locale_url + locale)
+		} catch (err) {
+			console.log('Change locale error', err)
+		}
+	}
+}
 </script>
 
 <style scoped>
-.locale-changer {
+.change-locale {
 	float: right;
 	width: auto;
-	height: auto;
-	padding: 5px;
+	height: 44px;
+	margin: 5px;
+	background: var(--bg-primary);
+	border-radius: var(--border-radius);
+	border: 0px solid var(--divider-primary);
 }
-.locale-changer-select {
-	float: right;
-	display: inline;
-	padding: 2px;
-	text-align: center;
+.change-locale .locale-select {
+	box-sizing: border-box;
+	min-width: 60px;
+	height: 42px;
+	float: left;
 	border: 0px;
-	font-size: 1rem;
 	cursor: pointer;
+	text-align: center;
+	padding-left: 5px;
+	font-size: 14px;
+	background: var(--bg-primary);
+	border-radius: var(--border-radius);
 }
-.locale-changer-select > * {
-	background: #fff;
-	color: #222;
+.change-locale .locale-select option,
+.change-locale .locale-select > * {
+	background: var(--bg-primary);
+	color: var(--text-primary);
 }
-.locale-changer-select:focus {
+.change-locale .locale-select:focus {
 	border: none;
 	box-shadow: none;
 }
-</style>
+</style>
+
+<!--
+// Old mini version
+// https://vue-i18n.intlify.dev/guide/advanced/composition.html#global-scope
+// Add in main i18n options main.js
+
+import { createI18n } from 'vue-i18n'
+
+const lang = {
+  // Allow compositions api (required)
+  allowComposition: true,
+  globalInjection: true,
+  legacy: false,
+
+  // Locales
+  locale: 'en',
+  fallbackLocale: 'en',
+  availableLocales: ['en', 'pl'],
+  messages: {
+    en: { en: "English", pl: "Polish" },
+    pl: { en: "Angielski", pl: "Polski" },
+  },
+}
+
+const i18n = createI18n(lang)
+app.use(i18n)
+-->