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

resources/js/packages/ui/src/Project/ProjectBadge.vue

@@ -4,12 +4,12 @@ import Badge from '@/packages/ui/src/Badge.vue';
 
 const props = withDefaults(
     defineProps<{
-        name: string;
-        size: 'base' | 'large' | 'xlarge';
-        tag: string;
+        name?: string;
+        size?: 'base' | 'large' | 'xlarge';
+        tag?: string;
         class?: string;
-        color: string;
-        border: boolean;
+        color?: string;
+        border?: boolean;
     }>(),
     {
         name: '',

resources/js/packages/ui/src/Project/ProjectBillableRateModal.vue

@@ -18,10 +18,10 @@ defineEmits<{
 
 <template>
     <BillableRateModal
-        @submit="$emit('submit')"
         v-model:show="show"
         v-model:saving="saving"
-        title="Update Project Billable Rate">
+        title="Update Project Billable Rate"
+        @submit="$emit('submit')">
         <p class="py-1 text-center">
             The billable rate of {{ projectName }} will be updated to
             <strong>{{

resources/js/packages/ui/src/Project/ProjectColorSelector.vue

@@ -23,12 +23,12 @@ const model = defineModel<string>({ default: '' });
                     <div
                         v-for="color in colors"
                         :key="color"
-                        @click="model = color"
                         :style="{
                             backgroundColor: color,
                             boxShadow: `var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) ${color}30`,
                         }"
-                        class="w-4 h-4 rounded-full cursor-pointer"></div>
+                        class="w-4 h-4 rounded-full cursor-pointer"
+                        @click="model = color"></div>
                 </div>
             </template>
         </Dropdown>

resources/js/packages/ui/src/Project/ProjectCreateModal.vue

@@ -86,31 +86,31 @@ const currentClientName = computed(() => {
                     <div class="text-center pr-5">
                         <InputLabel for="color" value="Color" />
                         <ProjectColorSelector
-                            class="mt-2.5"
-                            v-model="project.color"></ProjectColorSelector>
+                            v-model="project.color"
+                            class="mt-2.5"></ProjectColorSelector>
                     </div>
                     <div class="w-full">
                         <InputLabel for="projectName" value="Project name" />
                         <TextInput
                             id="projectName"
-                            name="projectName"
                             ref="projectNameInput"
                             v-model="project.name"
+                            name="projectName"
                             type="text"
                             placeholder="The next big thing"
-                            @keydown.enter="submit()"
                             class="mt-2 block w-full"
                             required
-                            autocomplete="projectName" />
+                            autocomplete="projectName"
+                            @keydown.enter="submit()" />
                     </div>
                 </div>
                 <div>
                     <InputLabel for="client" value="Client" />
                     <ClientDropdown
-                        :createClient="createClient"
+                        v-model="project.client_id"
+                        :create-client="createClient"
                         :clients="activeClients"
-                        class="mt-2"
-                        v-model="project.client_id">
+                        class="mt-2">
                         <template #trigger>
                             <Badge
                                 tag="button"
@@ -131,17 +131,17 @@ const currentClientName = computed(() => {
             <div class="lg:grid grid-cols-2 gap-12">
                 <div>
                     <ProjectEditBillableSection
-                        :currency="currency"
-                        v-model:isBillable="project.is_billable"
-                        v-model:billableRate="
+                        v-model:is-billable="project.is_billable"
+                        v-model:billable-rate="
                             project.billable_rate
-                        "></ProjectEditBillableSection>
+                        "
+                        :currency="currency"></ProjectEditBillableSection>
                 </div>
                 <div>
                     <EstimatedTimeSection
                         v-if="enableEstimatedTime"
-                        @submit="submit()"
-                        v-model="project.estimated_time"></EstimatedTimeSection>
+                        v-model="project.estimated_time"
+                        @submit="submit()"></EstimatedTimeSection>
                 </div>
             </div>
         </template>

resources/js/packages/ui/src/Project/ProjectEditBillableSection.vue

@@ -67,14 +67,14 @@ const emit = defineEmits(['submit']);
                 class="mt-2"></ProjectBillableSelect>
         </div>
         <div
-            class="sm:max-w-[120px]"
-            v-if="billableRateSelect === 'custom-rate'">
+            v-if="billableRateSelect === 'custom-rate'"
+            class="sm:max-w-[120px]">
             <InputLabel for="billableRate" value="Billable Rate" class="mb-2" />
             <BillableRateInput
-                @keydown.enter="emit('submit')"
-                :currency="currency"
                 v-model="billableRate"
-                name="billableRate" />
+                :currency="currency"
+                name="billableRate"
+                @keydown.enter="emit('submit')" />
         </div>
     </div>
     <div class="flex items-center text-muted text-xs pt-2 pl-1">