update dependencies, update eslint config, update optional ts props types

resources/js/Components/Common/Task/TaskCreateModal.vue

@@ -53,19 +53,19 @@ useFocus(taskNameInput, { initialValue: true });
                         v-model="taskName"
                         type="text"
                         placeholder="Task Name"
-                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="taskName" />
+                        autocomplete="taskName"
+                        @keydown.enter="submit()" />
                 </div>
                 <div class="col-span-6 sm:col-span-4">
-                    <ProjectDropdown :modelValue="projectId"></ProjectDropdown>
+                    <ProjectDropdown :model-value="projectId"></ProjectDropdown>
                 </div>
             </div>
             <EstimatedTimeSection
                 v-if="isAllowedToPerformPremiumAction()"
-                @submit="submit()"
-                v-model="estimatedTime"></EstimatedTimeSection>
+                v-model="estimatedTime"
+                @submit="submit()"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

resources/js/Components/Common/Task/TaskEditModal.vue

@@ -50,16 +50,16 @@ useFocus(taskNameInput, { initialValue: true });
                         v-model="taskBody.name"
                         type="text"
                         placeholder="Task Name"
-                        @keydown.enter="submit()"
                         class="mt-1 block w-full"
                         required
-                        autocomplete="taskName" />
+                        autocomplete="taskName"
+                        @keydown.enter="submit()" />
                 </div>
             </div>
             <EstimatedTimeSection
                 v-if="isAllowedToPerformPremiumAction()"
-                @submit="submit()"
-                v-model="taskBody.estimated_time"></EstimatedTimeSection>
+                v-model="taskBody.estimated_time"
+                @submit="submit()"></EstimatedTimeSection>
         </template>
         <template #footer>
             <SecondaryButton @click="show = false"> Cancel </SecondaryButton>

resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue

@@ -21,30 +21,30 @@ const props = defineProps<{
     <MoreOptionsDropdown :label="'Actions for Task ' + props.task.name">
         <div class="min-w-[150px]">
             <button
-                @click="emit('edit')"
                 v-if="canUpdateTasks()"
                 :aria-label="'Edit Task ' + props.task.name"
                 data-testid="task_edit"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                @click="emit('edit')">
                 <PencilSquareIcon
                     class="w-5 text-icon-active"></PencilSquareIcon>
                 <span>Edit</span>
             </button>
             <button
-                @click="emit('done')"
                 v-if="canUpdateTasks()"
                 :aria-label="'Mark Task ' + props.task.name + ' as done'"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                @click="emit('done')">
                 <CheckCircleIcon class="w-5 text-icon-active"></CheckCircleIcon>
                 <span v-if="props.task.is_done">Mark as active</span>
                 <span v-else>Mark as done</span>
             </button>
             <button
-                @click="emit('delete')"
-                :aria-label="'Delete Task ' + props.task.name"
                 v-if="canDeleteTasks()"
+                :aria-label="'Delete Task ' + props.task.name"
                 data-testid="task_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out"
+                @click="emit('delete')">
                 <TrashIcon class="w-5 text-icon-active"></TrashIcon>
                 <span>Delete</span>
             </button>

resources/js/Components/Common/Task/TaskMultiselectDropdown.vue

@@ -18,7 +18,7 @@ function getNameForItem(item: Task) {
 
 <template>
     <MultiselectDropdown
-        searchPlaceholder="Search for a Task..."
+        search-placeholder="Search for a Task..."
         :items="tasks"
         :get-key-from-item="getKeyFromItem"
         :get-name-for-item="getNameForItem">

resources/js/Components/Common/Task/TaskTable.vue

@@ -19,8 +19,8 @@ const createTask = ref(false);
 
 <template>
     <TaskCreateModal
-        :project-id="props.projectId"
-        v-model:show="createTask"></TaskCreateModal>
+        v-model:show="createTask"
+        :project-id="props.projectId"></TaskCreateModal>
     <div class="flow-root">
         <div class="inline-block min-w-full align-middle">
             <div
@@ -37,18 +37,18 @@ const createTask = ref(false);
                 ">
                 <TaskTableHeading></TaskTableHeading>
                 <div
-                    class="col-span-5 py-24 text-center"
-                    v-if="tasks.length === 0">
+                    v-if="tasks.length === 0"
+                    class="col-span-5 py-24 text-center">
                     <PlusCircleIcon
                         class="w-8 text-icon-default inline pb-2"></PlusCircleIcon>
                     <h3 class="text-white font-semibold">No tasks found</h3>
-                    <p class="pb-5" v-if="canCreateTasks()">
+                    <p v-if="canCreateTasks()" class="pb-5">
                         Create your first task now!
                     </p>
                     <SecondaryButton
                         v-if="canCreateTasks()"
-                        @click="createTask = true"
                         :icon="PlusIcon"
+                        @click="createTask = true"
                         >Create your First Task
                     </SecondaryButton>
                 </div>

resources/js/Components/Common/Task/TaskTableRow.vue

@@ -75,8 +75,8 @@ const showTaskEditModal = ref(false);
                 @delete="deleteTask"></TaskMoreOptionsDropdown>
         </div>
         <TaskEditModal
-            :task="task"
-            v-model:show="showTaskEditModal"></TaskEditModal>
+            v-model:show="showTaskEditModal"
+            :task="task"></TaskEditModal>
     </TableRow>
 </template>