Add translation keys for Environment Indicator component (#136)

* Begin Work

* Finish work

lib/components/base/EnvironmentIndicator.vue

@@ -1,7 +1,7 @@
 <template>
   <span v-if="typeOnly" class="environment">
     <InfoIcon aria-hidden="true" />
-    A {{ type }}
+    {{ formatMessage(messages.typeLabel, { type: type }) }}
   </span>
   <span
     v-else-if="
@@ -13,11 +13,11 @@
   >
     <template v-if="clientSide === 'optional' && serverSide === 'optional'">
       <GlobeIcon aria-hidden="true" />
-      Client or server
+      {{ formatMessage(messages.clientOrServerLabel) }}
     </template>
     <template v-else-if="clientSide === 'required' && serverSide === 'required'">
       <GlobeIcon aria-hidden="true" />
-      Client and server
+      {{ formatMessage(messages.clientAndServerLabel) }}
     </template>
     <template
       v-else-if="
@@ -26,7 +26,7 @@
       "
     >
       <ClientIcon aria-hidden="true" />
-      Client
+      {{ formatMessage(messages.clientLabel) }}
     </template>
     <template
       v-else-if="
@@ -35,20 +35,48 @@
       "
     >
       <ServerIcon aria-hidden="true" />
-      Server
+      {{ formatMessage(messages.serverLabel) }}
     </template>
     <template v-else-if="serverSide === 'unsupported' && clientSide === 'unsupported'">
       <GlobeIcon aria-hidden="true" />
-      Unsupported
+      {{ formatMessage(messages.unsupportedLabel) }}
     </template>
     <template v-else-if="alwaysShow">
       <InfoIcon aria-hidden="true" />
-      A {{ type }}
+      {{ formatMessage(messages.typeLabel, { type: type }) }}
     </template>
   </span>
 </template>
 <script setup>
 import { GlobeIcon, ClientIcon, ServerIcon, InfoIcon } from '@'
+import { useVIntl, defineMessages } from '@vintl/vintl'
+const messages = defineMessages({
+  clientLabel: {
+    id: 'omorphia.component.environment-indicator.label.client',
+    defaultMessage: 'Client',
+  },
+  clientAndServerLabel: {
+    id: 'omorphia.component.environment-indicator.label.client-and-server',
+    defaultMessage: 'Client and server',
+  },
+  clientOrServerLabel: {
+    id: 'omorphia.component.environment-indicator.label.client-or-server',
+    defaultMessage: 'Client or server',
+  },
+  serverLabel: {
+    id: 'omorphia.component.environment-indicator.label.server',
+    defaultMessage: 'Server',
+  },
+  typeLabel: {
+    id: 'omorphia.component.environment-indicator.label.type',
+    defaultMessage: 'A {type}',
+  },
+  unsupportedLabel: {
+    id: 'omorphia.component.environment-indicator.label.unsupported',
+    defaultMessage: 'Unsupported',
+  },
+})
+const { formatMessage } = useVIntl()
 </script>
 <script>
 import { defineComponent } from 'vue'

locales/en-US/index.json

@@ -58,5 +58,23 @@
   },
   "omorphia.component.copy.action.copy": {
     "defaultMessage": "Copy code to clipboard"
+  },
+  "omorphia.component.environment-indicator.label.client": {
+    "defaultMessage": "Client"
+  },
+  "omorphia.component.environment-indicator.label.client-and-server": {
+    "defaultMessage": "Client and server"
+  },
+  "omorphia.component.environment-indicator.label.client-or-server": {
+    "defaultMessage": "Client or server"
+  },
+  "omorphia.component.environment-indicator.label.server": {
+    "defaultMessage": "Server"
+  },
+  "omorphia.component.environment-indicator.label.type": {
+    "defaultMessage": "A {type}"
+  },
+  "omorphia.component.environment-indicator.label.unsupported": {
+    "defaultMessage": "Unsupported"
   }
 }