chore: translate components

frontend/components/App/ImportDialog.vue

@@ -1,9 +1,8 @@
 <template>
   <BaseModal v-model="dialog">
-    <template #title> Import CSV File </template>
+    <template #title> {{ $t("components.app.import_dialog.title") }} </template>
     <p>
-      Import a CSV file containing your items, labels, and locations. See documentation for more information on the
-      required format.
+      {{ $t("components.app.import_dialog.description") }}
     </p>
     <div class="alert alert-warning shadow-lg mt-4">
       <div>
@@ -21,8 +20,7 @@
           />
         </svg>
         <span class="text-sm">
-          Behavior for imports with existing import_refs has changed. If an import_ref is present in the CSV file, the
-          item will be updated with the values in the CSV file.
+          {{ $t("components.app.import_dialog.change_warning") }}
         </span>
       </div>
     </div>
@@ -33,7 +31,7 @@
 
         <BaseButton type="button" @click="uploadCsv">
           <MdiUpload class="h-5 w-5 mr-2" />
-          Upload
+          {{ $t("components.app.import_dialog.upload") }}
         </BaseButton>
         <p class="text-center pt-4 -mb-5">
           {{ importCsv?.name }}
@@ -41,7 +39,7 @@
       </div>
 
       <div class="modal-action">
-        <BaseButton type="submit" :disabled="!importCsv"> Submit </BaseButton>
+        <BaseButton type="submit" :disabled="!importCsv"> {{ $t("global.submit") }} </BaseButton>
       </div>
     </form>
   </BaseModal>

frontend/components/Item/CreateModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseModal v-model="modal">
-    <template #title> Create Item </template>
+    <template #title> {{ $t("components.item.create_modal.title") }} </template>
     <form @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
       <FormTextField ref="nameInput" v-model="form.name" :trigger-focus="focused" :autofocus="true" label="Item Name" />
@@ -13,7 +13,7 @@
               <MdiPackageVariant class="swap-off h-5 w-5" />
               <MdiPackageVariantClosed class="swap-on h-5 w-5" />
             </template>
-            Create
+            {{ $t("global.create") }}
           </BaseButton>
           <div class="dropdown dropdown-top">
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
@@ -21,7 +21,7 @@
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64 right-0">
               <li>
-                <button type="button" @click="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>
             </ul>
           </div>

frontend/components/Item/View/Selectable.vue

@@ -29,7 +29,7 @@
 <template>
   <section>
     <BaseSectionHeader class="mb-2 flex justify-between items-center">
-      Items
+      {{ $t("components.item.view.selectable.items") }}
       <template #description>
         <div v-if="!viewSet" class="dropdown dropdown-hover dropdown-left">
           <label tabindex="0" class="btn btn-ghost m-1">
@@ -39,13 +39,13 @@
             <li>
               <button @click="setViewPreference('card')">
                 <MdiCardTextOutline class="h-5 w-5" />
-                Card
+                {{ $t("components.item.view.selectable.card") }}
               </button>
             </li>
             <li>
               <button @click="setViewPreference('table')">
                 <MdiTable class="h-5 w-5" />
-                Table
+                {{ $t("components.item.view.selectable.table") }}
               </button>
             </li>
           </ul>
@@ -59,7 +59,7 @@
     <template v-else>
       <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
         <ItemCard v-for="item in items" :key="item.id" :item="item" />
-        <div class="first:block hidden text-lg">No Items to Display</div>
+        <div class="first:block hidden text-lg">{{ $t("components.item.view.selectable.no_items") }}</div>
       </div>
     </template>
   </section>

frontend/components/Label/CreateModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseModal v-model="modal">
-    <template #title> Create Label </template>
+    <template #title>{{ $t("components.label.create_modal.title") }}</template>
     <form @submit.prevent="create()">
       <FormTextField
         ref="locationNameRef"
@@ -12,14 +12,14 @@
       <FormTextArea v-model="form.description" label="Label Description" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" :loading="loading" type="submit"> Create </BaseButton>
+          <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>
           <div class="dropdown dropdown-top">
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="h-5 w-5" />
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64 right-0">
               <li>
-                <button type="button" @click="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>
             </ul>
           </div>

frontend/components/Location/CreateModal.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseModal v-model="modal">
-    <template #title> Create Location </template>
+    <template #title>{{ $t("components.location.create_modal.title") }}</template>
     <form @submit.prevent="create()">
       <FormTextField
         ref="locationNameRef"
@@ -13,14 +13,14 @@
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
-          <BaseButton class="rounded-r-none" type="submit" :loading="loading"> Create </BaseButton>
+          <BaseButton class="rounded-r-none" type="submit" :loading="loading">{{ $t("global.create") }}</BaseButton>
           <div class="dropdown dropdown-top">
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="h-5 w-5" />
             </label>
             <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64 right-0">
               <li>
-                <button type="button" @click="create(false)">Create and Add Another</button>
+                <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>
             </ul>
           </div>

frontend/components/ModalConfirm.vue

@@ -1,11 +1,11 @@
 <template>
   <BaseModal v-model="isRevealed" readonly @cancel="cancel(false)">
-    <template #title> Confirm </template>
+    <template #title> {{ $t("global.confirm") }} </template>
     <div>
       <p>{{ text }}</p>
     </div>
     <div class="modal-action">
-      <BaseButton type="submit" @click="confirm(true)"> Confirm </BaseButton>
+      <BaseButton type="submit" @click="confirm(true)"> {{ $t("global.confirm") }} </BaseButton>
     </div>
   </BaseModal>
 </template>

frontend/components/global/PageQRCode.vue

@@ -7,7 +7,7 @@
     </slot>
     <div tabindex="0" class="card compact dropdown-content shadow-lg bg-base-100 rounded-box w-64">
       <div class="card-body">
-        <h2 class="text-center">Page URL</h2>
+        <h2 class="text-center">{{ $t("components.global.page_qr_code.page_url") }}</h2>
         <img :src="getQRCodeUrl()" />
       </div>
     </div>

frontend/components/global/PasswordScore.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="py-4">
-    <p class="text-sm">{{ $t("components.password_score.password_strength") }}: {{ message }}</p>
+    <p class="text-sm">{{ $t("components.global.password_score.password_strength") }}: {{ message }}</p>
     <progress
       class="progress w-full progress-bar"
       :value="score"

frontend/locales/en.json

@@ -7,7 +7,11 @@
         "follow_dev": "Follow the Developer",
         "read_docs": "Read the Docs",
         "password": "Password",
-        "email": "Email"
+        "email": "Email",
+        "submit": "Submit",
+        "confirm": "Confirm",
+        "create": "Create",
+        "create_and_add": "Create and Add Another"
     },
     "index": {
         "tagline": "Track, Organize, and Manage your Things.",
@@ -22,8 +26,44 @@
         "dont_join_group": "Don't want to join a group?"
     },
     "components": {
+        "global": {
             "password_score": {
                 "password_strength": "Password Strength"
+            },
+            "page_qr_code": {
+                "page_url": "Page URL"
+            }
+        },
+        "app": {
+            "import_dialog": {
+                "title": "Import CSV File",
+                "description": "Import a CSV file containing your items, labels, and locations. See documentation for more information on the\n required format.",
+                "change_warning": "Behavior for imports with existing import_refs has changed. If an import_ref is present in the CSV file, the\n item will be updated with the values in the CSV file.",
+                "upload": "Upload"
+            }
+        },
+        "item": {
+            "create_modal": {
+                "title": "Create Item"
+            },
+            "view": {
+                "selectable": {
+                    "items": "Items",
+                    "card": "Card",
+                    "table": "Table",
+                    "no_items": "No Items to Display"
+                }
+            }
+        },
+        "label": {
+            "create_modal": {
+                "title": "Create Label"
+            }
+        },
+        "location": {
+            "create_modal": {
+                "title": "Create Location"
+            }
         }
     }
 }