feat: lang

resources/ts/components/TaskList.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref, onBeforeMount, computed } from "vue";
+import { ref, onBeforeMount, computed, defineAsyncComponent } from "vue";
 import type { Task } from "@/types";
 import { getTasks, createTask, deleteTask } from "@/api/tasks";
 import { CirclePlus } from "@lucide/vue";
-import TaskItem from "@/components/TaskItem.vue";
+const TaskItem = defineAsyncComponent(() => import("@/components/TaskItem.vue"));
 import { taskCompleted, sortTasks } from "@/lib/tasks";
 import { SortType } from "@/enums";
 import { booleanCookieRef, enumCookieRef } from "@/lib/cookies";
@@ -93,7 +93,7 @@ onBeforeMount(fetchTasks);
                 <input
                     v-model="taskInput"
                     type="text"
-                    placeholder="New Task"
+                    :placeholder="$t('new_task_hint')"
                     class="input"
                     @keyup.enter="onNewTask"
                 />
@@ -111,7 +111,7 @@ onBeforeMount(fetchTasks);
     </ul>
     <div v-if="separateCompleted && hasCompleted" class="collapse collapse-arrow">
       <input id="completed-dropdown" type="checkbox" />
-      <div class="collapse-title mb-0">Completed</div>
+      <div class="collapse-title mb-0">{{ $t('completed') }}</div>
       <div class="collapse-content p-0">
           <ul class="list">
               <template v-for="(task, i) in tasks" :key="`${task.id}-completed`">
@@ -130,34 +130,34 @@ onBeforeMount(fetchTasks);
     </div>
     <div class="collapse collapse-arrow  font-light text-sm">
       <input id="options-dropdown" type="checkbox"/>
-      <div class="collapse-title">Options</div>
+      <div class="collapse-title">{{ $t('options.title') }}</div>
       <div class="collapse-content text-sm">
           <fieldset class="fieldset flex flex-col gap-2">
               <label class="label">
                 Sort by
                 <select v-model="sortType" class="select" @change="onChangeSortType">
-                <option :value="SortType.CREATED_AT">Creation date</option>
-                <option :value="SortType.UPDATED_AT">Creation or update date</option>
-                <option :value="SortType.CHECK_DATE">Last check date</option>
-                <option :value="SortType.RESET_DATE">Next reset date</option>
-                <option :value="SortType.NAME">Name</option>
+                <option :value="SortType.CREATED_AT">{{ $t('options.sort.created_at') }}</option>
+                <option :value="SortType.UPDATED_AT">{{ $t('options.sort.updated_at') }}</option>
+                <option :value="SortType.CHECK_DATE">{{ $t('options.sort.check_date') }}</option>
+                <option :value="SortType.RESET_DATE">{{ $t('options.sort.reset_date') }}</option>
+                <option :value="SortType.NAME">{{ $t('options.sort.name') }}</option>
                 </select>
             </label>
             <label class="label">
               <input v-model="sortReverse" type="checkbox" class="checkbox" @change="onChangeSortReverse" />
-              Reverse sort
+              {{ $t('options.reverse_sort') }}
             </label>
             <label class="label">
               <input v-model="showLastChecked" type="checkbox" class="checkbox" />
-              Show last checked time
+              {{ $t('options.last_checked') }}
             </label>
             <label class="label">
               <input v-model="showNextReset" type="checkbox" class="checkbox" />
-              Show next reset time
+              {{ $t('options.next_reset') }}
             </label>
             <label class="label">
               <input v-model="separateCompleted" type="checkbox" class="checkbox" />
-              Move completed tasks below
+              {{ $t('options.separate_completed') }}
             </label>
           </fieldset>
       </div>