ADD: Install vue-i18n & implement in navbar

package-lock.json

@@ -1,12 +1,13 @@
 {
   "name": "zeroone",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "zeroone",
-      "version": "0.1.0",
+      "version": "0.1.1",
+      "hasInstallScript": true,
       "dependencies": {
         "@radix-icons/vue": "^1.0.0",
         "@radix-ui/react-icons": "^1.3.0",
@@ -23,6 +24,7 @@
         "tailwindcss-animate": "^1.0.7",
         "vee-validate": "^4.12.4",
         "vue": "^3.3.11",
+        "vue-i18n": "^9.9.0",
         "zod": "^3.22.4"
       },
       "devDependencies": {
@@ -692,6 +694,47 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.9.0.tgz",
+      "integrity": "sha512-C7UXPymDIOlMGSNjAhNLtKgzITc/8BjINK5gNKXg8GiWCTwL6n3MWr55czksxn8RM5wTMz0qcLOFT+adtaVQaA==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.9.0",
+        "@intlify/shared": "9.9.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.9.0.tgz",
+      "integrity": "sha512-yDU/jdUm9KuhEzYfS+wuyja209yXgdl1XFhMlKtXEgSFTxz4COZQCRXXbbH8JrAjMsaJ7bdoPSLsKlY6mXG2iA==",
+      "dependencies": {
+        "@intlify/shared": "9.9.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.9.0.tgz",
+      "integrity": "sha512-1ECUyAHRrzOJbOizyGufYP2yukqGrWXtkmTu4PcswVnWbkcjzk3YQGmJ0bLkM7JZ0ZYAaohLGdYvBYnTOGYJ9g==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -12118,6 +12161,25 @@
         "url": "https://github.com/sponsors/nklayman"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.9.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.9.0.tgz",
+      "integrity": "sha512-xQ5SxszUAqK5n84N+uUyHH/PiQl9xZ24FOxyAaNonmOQgXeN+rD9z/6DStOpOxNFQn4Cgcquot05gZc+CdOujA==",
+      "dependencies": {
+        "@intlify/core-base": "9.9.0",
+        "@intlify/shared": "9.9.0",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -29,6 +29,7 @@
     "tailwindcss-animate": "^1.0.7",
     "vee-validate": "^4.12.4",
     "vue": "^3.3.11",
+    "vue-i18n": "^9.9.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/App.vue

@@ -60,19 +60,20 @@ const state = reactive({ count: 12 });
   <div class="flex">
   <Menubar class="w-full rounded-none bg-zinc-950">
     <MenubarMenu>
-      <MenubarTrigger>Device</MenubarTrigger>
+      <MenubarTrigger v-t="'navbar.device.title'"></MenubarTrigger>
       <MenubarContent>
+        <!-- TODO: Switch keyboard shortcut icons based on platform -->
         <MenubarItem>
-          Disconnect <MenubarShortcut>⌘D</MenubarShortcut>
+          {{$t('navbar.device.disconnect')}} <MenubarShortcut>⌘D</MenubarShortcut>
         </MenubarItem>
-        <MenubarItem>About Device</MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Preferences</MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Export JSON<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
-        <MenubarItem>Export JSON<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.export') }}<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.import') }}<MenubarShortcut>⌘I</MenubarShortcut></MenubarItem>
         <MenubarSeparator />
-        <MenubarItem>Quit<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
+        <MenubarItem>{{ $t('navbar.device.quit') }}<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
       </MenubarContent>
     </MenubarMenu>
   </Menubar>

src/lang/en.js

@@ -0,0 +1,15 @@
+// 'en' Locale
+export default {
+    navbar: {
+        device: {
+            title: 'Device',
+            connect: 'Connect',
+            disconnect: 'Disconnect',
+            about: 'About Device',
+            preferences: 'Preferences',
+            export: 'Export JSON',
+            import: 'Import JSON',
+            quit: 'Quit'
+        }
+    },
+}

src/main.js

@@ -1,10 +1,22 @@
 import './assets/main.css'
 
-import { createApp } from 'vue'
+import {createApp} from 'vue'
+import {createI18n} from 'vue-i18n'
+
+import en from './lang/en.js'
+
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const i18n = createI18n({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {en}
+})
 
+const app = createApp(App)
+
+app.use(i18n)
+app.mount('#app')
 
 var startPos = 0;
 var totalPos = 360;
@@ -12,18 +24,18 @@ var currentPos = 156;
 var minRange = 0;
 var maxRange = 40;
 
-document.addEventListener("DOMContentLoaded", function(){
+document.addEventListener("DOMContentLoaded", function () {
     //....
 
 // Quick Preview GUI indicator Render
-var scale = document.getElementById("scale");
+    var scale = document.getElementById("scale");
 
-Number.prototype.map = function (in_min, in_max, out_min, out_max) {
+    Number.prototype.map = function (in_min, in_max, out_min, out_max) {
         return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
-}
-var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
+    }
+    var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
 
-for(var i = 0; i < 40; i=i+1){
+    for (var i = 0; i < 40; i = i + 1) {
         scale.innerHTML += "<div class='bg-white'></div>";
         if (i - 1 < guiCurrentPos) {
             scale.getElementsByTagName("div")[i].classList.add("active");
@@ -32,5 +44,5 @@ for(var i = 0; i < 40; i=i+1){
             }
         }
 
-}
+    }
 });