From 2e39a5bceb16c4b9ffc4cdd1167e3d21a6017566 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 26 Jul 2023 14:51:37 -0700
Subject: [PATCH] feat: basic vue-i18n

---
 app.vue                       |  2 +-
 components/I18nHost.ce.vue    | 41 +++++++++++++++++++
 components/UserProfile.ce.vue |  8 +++-
 layouts/default.vue           |  4 +-
 nuxt.config.ts                |  4 ++
 package-lock.json             | 76 ++++++++++++++++++++++++++++++++++-
 package.json                  |  1 +
 pages/index.vue               |  2 +-
 pages/webComponents.vue       | 26 ++++++++----
 plugins/i18n.ts               | 19 +++++++++
 10 files changed, 169 insertions(+), 14 deletions(-)
 create mode 100644 components/I18nHost.ce.vue
 create mode 100644 plugins/i18n.ts

diff --git a/app.vue b/app.vue
index 49ad1c6da..2ddbece3b 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>
 
diff --git a/components/I18nHost.ce.vue b/components/I18nHost.ce.vue
new file mode 100644
index 000000000..211b1a832
--- /dev/null
+++ b/components/I18nHost.ce.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { provide } from 'vue';
+import { createI18n, I18nInjectionKey } from 'vue-i18n';
+
+/**
+ * Define the web components that host the i18n instance.
+ *
+ * Because the web components environment isn't hosted in a Vue apps by `createApp`, but is provided by itself.
+ * The i18n instance created by `createI18n` will be installed with `app.use` in Vue apps,
+ * so that you can use i18n features with `useI18n` in Vue components.
+ * In order to use `useI18n` in web components, you need to have web components hosted as root to use it.
+ */
+
+/**
+ * create an i18n instance to host for other web components
+ */
+const i18n = createI18n<false>({
+  legacy: false, // must set to `false`
+  locale: 'en',
+  messages: {
+    en: {
+      hello: 'Hello!'
+    },
+    ja: {
+      hello: 'こんにちは！'
+    }
+  }
+});
+/**
+ * provide i18n instance with `I18nInjectionKey` for other web components
+ */
+provide(I18nInjectionKey, i18n);
+
+// watchEffect(() => {
+//   i18n.global.locale.value = props.locale;
+// });
+</script>
+
+<template>
+  <slot />
+</template>
diff --git a/components/UserProfile.ce.vue b/components/UserProfile.ce.vue
index 229f00f08..8efba78ea 100644
--- a/components/UserProfile.ce.vue
+++ b/components/UserProfile.ce.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia';
 import { OnClickOutside } from '@vueuse/components';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
 import { useCallbackStore } from '~/store/callbackActions';
 import { useDropdownStore } from '~/store/dropdown';
@@ -77,6 +78,8 @@ onBeforeMount(() => {
    */
   callbackStore.watcher();
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -92,7 +95,8 @@ onBeforeMount(() => {
     <div class="relative z-10 flex flex-row items-center justify-end gap-x-16px h-full">
       <h1 class="text-alpha text-14px sm:text-18px relative flex flex-col-reverse items-end md:flex-row border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
         <template v-if="description && theme?.descriptionShow">
-          <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span>
+          <!-- <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span> -->
+          <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ t('hello') }}</span>
           <span class="text-gamma hidden md:inline-block px-8px">&bull;</span>
         </template>
         <button :title="`Click to Copy LAN IP ${lanIp}`" @click="copyLanIp()">
diff --git a/layouts/default.vue b/layouts/default.vue
index 8a893595f..066b6d8b0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,10 @@
 <template>
   <client-only>
     <div class="flex flex-row items-center justify-center gap-6 p-6 text-gray-200 bg-zinc-800">
-      <NuxtLink to="/" class="underline hover:no-underline focus:no-underline">
+      <NuxtLink to="/" class="underline hover:no-underline focus:no-underline" active-class="text-orange">
         Test Vue Components
       </NuxtLink>
-      <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline">
+      <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline" active-class="text-orange">
         Test Web Components
       </NuxtLink>
     </div>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 65a5f7f49..620a1aa67 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -35,6 +35,10 @@ export default defineNuxtConfig({
       {
         name: 'UnraidComponents',
         tags: [
+          {
+            name: 'UnraidI18nHost',
+            path: '@/components/I18nHost.ce',
+          },
           {
             name: 'UnraidAuth',
             path: '@/components/Auth.ce',
diff --git a/package-lock.json b/package-lock.json
index 5c58c1754..b28d1dfc2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "graphql-tag": "^2.12.6",
         "graphql-ws": "^5.14.0",
         "hex-to-rgba": "^2.0.1",
+        "vue-i18n": "^9.2.2",
         "wretch": "^2.6.0"
       },
       "devDependencies": {
@@ -3662,6 +3663,63 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -18434,7 +18492,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -20677,6 +20734,23 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
diff --git a/package.json b/package.json
index 7532c4d23..9fa0bc471 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.14.0",
     "hex-to-rgba": "^2.0.1",
+    "vue-i18n": "^9.2.2",
     "wretch": "^2.6.0"
   },
   "overrides": {
diff --git a/pages/index.vue b/pages/index.vue
index d6cec6ac2..977357c12 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@ import { serverState } from '~/_data/serverState';
 
 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>
 
diff --git a/pages/webComponents.vue b/pages/webComponents.vue
index fac995194..2d0338e3a 100644
--- a/pages/webComponents.vue
+++ b/pages/webComponents.vue
@@ -3,7 +3,7 @@ import { serverState } from '~/_data/serverState';
 
 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>
 
@@ -14,22 +14,34 @@ onBeforeMount(() => {
         <div class="flex flex-col gap-6 p-6">
           <h2>Web Components</h2>
           <h3>UserProfileCe</h3>
-          <unraid-user-profile :server="JSON.stringify(serverState)" />
+          <unraid-i18n-host>
+            <unraid-user-profile :server="JSON.stringify(serverState)" />
+          </unraid-i18n-host>
           <hr>
           <h3>DownloadApiLogsCe</h3>
-          <unraid-download-api-logs />
+          <unraid-i18n-host>
+            <unraid-download-api-logs />
+          </unraid-i18n-host>
           <hr>
           <h3>AuthCe</h3>
-          <unraid-auth />
+          <unraid-i18n-host>
+            <unraid-auth />
+          </unraid-i18n-host>
           <hr>
           <h3>KeyActionsCe</h3>
-          <unraid-key-actions />
+          <unraid-i18n-host>
+            <unraid-key-actions />
+          </unraid-i18n-host>
           <hr>
           <h3>WanIpCheckCe</h3>
-          <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
+          <unraid-i18n-host>
+            <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
+          </unraid-i18n-host>
           <hr>
           <h3>ModalsCe</h3>
-          <unraid-modals />
+          <unraid-i18n-host>
+            <unraid-modals />
+          </unraid-i18n-host>
         </div>
       </div>
     </div>
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
new file mode 100644
index 000000000..92126de02
--- /dev/null
+++ b/plugins/i18n.ts
@@ -0,0 +1,19 @@
+import { createI18n } from 'vue-i18n';
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: 'ja',
+    messages: {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    }
+  });
+
+  vueApp.use(i18n);
+});