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

resources/js/packages/ui/src/Input/BillableRateInput.vue

@@ -77,13 +77,13 @@ const inputValue = ref(formatValue(model.value));
             :id="name"
             ref="billableRateInput"
             v-model="inputValue"
-            @blur="updateRate($event.target.value)"
-            @keydown.enter="updateRate($event.target.value)"
             type="text"
             :name="name"
             placeholder="Billable Rate"
             class="block w-full"
-            autocomplete="teamMemberRate" />
+            autocomplete="teamMemberRate"
+            @blur="updateRate($event.target.value)"
+            @keydown.enter="updateRate($event.target.value)" />
         <div
             class="absolute top-0 right-0 h-full flex items-center px-4 font-medium pointer-events-none">
             <span>

resources/js/packages/ui/src/Input/BillableToggleButton.vue

@@ -11,7 +11,7 @@ function toggleBillable() {
 
 const props = withDefaults(
     defineProps<{
-        size: 'small' | 'base';
+        size?: 'small' | 'base';
     }>(),
     {
         size: 'base',
@@ -40,14 +40,14 @@ const iconSizeWrapperClasses =
 
 <template>
     <button
-        @click="toggleBillable"
         :class="
             twMerge(
                 iconColorClasses,
                 iconSizeWrapperClasses,
                 'flex-shrink-0 ring-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring transition focus:bg-card-background-separator hover:bg-card-background-separator rounded-full flex items-center justify-center'
             )
-        ">
+        "
+        @click="toggleBillable">
         <BillableIcon :class="iconSizeClasses"></BillableIcon>
     </button>
 </template>

resources/js/packages/ui/src/Input/Checkbox.vue

@@ -31,9 +31,9 @@ const proxyChecked = computed({
 
 <template>
     <input
+        :id="id"
         v-model="proxyChecked"
         type="checkbox"
-        :id="id"
         :value="value"
         class="h-4 w-4 rounded bg-card-background border-input-border text-accent-500/80 focus:outline-none focus:ring-ring/50 focus-visible:outline-none focus-visible:ring-ring/50" />
 </template>

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -48,10 +48,8 @@ const emit = defineEmits(['changed']);
 <template>
     <div class="flex items-center text-muted">
         <input
+            id="start"
             ref="datePicker"
-            @change="updateTempValue"
-            @blur="updateDate"
-            @keydown.enter="updateDate"
             :class="
                 twMerge(
                     'bg-input-background border text-white border-input-border focus-visible:outline-0 focus-visible:border-input-border-active focus-visible:ring-0 rounded-md',
@@ -59,9 +57,11 @@ const emit = defineEmits(['changed']);
                 )
             "
             type="date"
-            id="start"
             name="trip-start"
-            :value="tempDate" />
+            :value="tempDate"
+            @change="updateTempValue"
+            @blur="updateDate"
+            @keydown.enter="updateDate" />
     </div>
 </template>
 

resources/js/packages/ui/src/Input/Dropdown.vue

@@ -14,8 +14,8 @@ import { isLastLayer, layers } from '@/packages/ui/src/utils/dismissableLayer';
 
 const props = withDefaults(
     defineProps<{
-        align: Placement;
-        closeOnContentClick: boolean;
+        align?: Placement;
+        closeOnContentClick?: boolean;
     }>(),
     {
         align: 'bottom-start',
@@ -94,7 +94,7 @@ const { floatingStyles } = useFloating(reference, floating, {
 
 <template>
     <div class="min-w-0 isolate">
-        <div @click.prevent="toggleOpen" ref="reference" class="min-w-0">
+        <div ref="reference" class="min-w-0" @click.prevent="toggleOpen">
             <slot name="trigger" />
         </div>
 
@@ -113,8 +113,8 @@ const { floatingStyles } = useFloating(reference, floating, {
                 leave-to-class="transform opacity-0 scale-95">
                 <div
                     v-if="open"
-                    class="z-50"
                     ref="floating"
+                    class="z-50"
                     :style="floatingStyles"
                     @click="onContentClick">
                     <div

resources/js/packages/ui/src/Input/DurationHumanInput.vue

@@ -78,11 +78,11 @@ function updateTimeEntryInputValue() {
 <template>
     <TextInput
         ref="inputField"
-        @blur="updateDuration"
-        @keydown.enter="updateDuration"
         v-model="temporaryCustomTimerEntry"
         :class="twMerge('text-text-secondary', props.class)"
-        type="text" />
+        type="text"
+        @blur="updateDuration"
+        @keydown.enter="updateDuration" />
 </template>
 
 <style scoped></style>

resources/js/packages/ui/src/Input/DurationInput.vue

@@ -54,12 +54,12 @@ function updateAndSubmit() {
 <template>
     <div class="relative">
         <TextInput
+            v-model="currentTime"
             class="w-full overflow-hidden pr-14"
             placeholder="0"
             @focus="selectInput"
             @blur="updateDuration"
-            @keydown.enter="updateAndSubmit"
-            v-model="currentTime">
+            @keydown.enter="updateAndSubmit">
         </TextInput>
         <div
             class="absolute top-0 right-0 h-full flex items-center px-4 font-medium">

resources/js/packages/ui/src/Input/MultiselectDropdown.vue

@@ -151,20 +151,20 @@ const highlightedItem = computed(() => {
 </script>
 
 <template>
-    <Dropdown v-model="open" align="bottom-start" :closeOnContentClick="false">
+    <Dropdown v-model="open" align="bottom-start" :close-on-content-click="false">
         <template #trigger>
             <slot name="trigger"></slot>
         </template>
         <template #content>
             <input
+                ref="searchInput"
                 :value="searchValue"
+                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
+                :placeholder="searchPlaceholder"
                 @input="updateSearchValue"
                 @keydown.up.prevent="moveHighlightUp"
                 @keydown.down.prevent="moveHighlightDown"
-                @keydown.enter="toggleItem(highlightedItemId)"
-                ref="searchInput"
-                class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-separator focus:border-card-background-separator w-full"
-                :placeholder="searchPlaceholder" />
+                @keydown.enter="toggleItem(highlightedItemId)" />
             <div
                 ref="dropdownViewport"
                 class="min-w-60 max-w-80 max-h-60 overflow-y-scroll">
@@ -180,10 +180,10 @@ const highlightedItem = computed(() => {
                     :data-item-id="props.getKeyFromItem(item)">
                     <MultiselectDropdownItem
                         :selected="isItemSelected(props.getKeyFromItem(item))"
-                        @click="toggleItem(props.getKeyFromItem(item))"
                         :name="
                             props.getNameForItem(item)
-                        "></MultiselectDropdownItem>
+                        "
+                        @click="toggleItem(props.getKeyFromItem(item))"></MultiselectDropdownItem>
                 </div>
             </div>
         </template>

resources/js/packages/ui/src/Input/SelectDropdown.vue

@@ -155,7 +155,7 @@ watch(open, () => {
 </script>
 
 <template>
-    <Dropdown v-model="open" :align="align" :closeOnContentClick="false">
+    <Dropdown v-model="open" :align="align" :close-on-content-click="false">
         <template #trigger>
             <slot name="trigger"> </slot>
         </template>
@@ -176,15 +176,15 @@ watch(open, () => {
                     :value="props.getKeyFromItem(item)"
                     :data-item-id="props.getKeyFromItem(item)">
                     <SelectDropdownItem
-                        @mouseenter="
-                            highlightedItemId = props.getKeyFromItem(item)
-                        "
                         :highlighted="
                             props.getKeyFromItem(item) === highlightedItemId
                         "
                         :selected="props.getKeyFromItem(item) === model"
-                        @click="setItem(props.getKeyFromItem(item))"
-                        :name="props.getNameForItem(item)"></SelectDropdownItem>
+                        :name="props.getNameForItem(item)"
+                        @mouseenter="
+                            highlightedItemId = props.getKeyFromItem(item)
+                        "
+                        @click="setItem(props.getKeyFromItem(item))"></SelectDropdownItem>
                 </div>
             </div>
         </template>

resources/js/packages/ui/src/Input/TextInput.vue

@@ -22,12 +22,12 @@ const model = defineModel();
 <template>
     <input
         ref="input"
+        v-model="model"
         :class="
             twMerge(
                 'border-input-border border bg-input-background text-white focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-transparent rounded-md shadow-sm',
                 props.class
             )
         "
-        v-model="model"
         :name="name" />
 </template>

resources/js/packages/ui/src/Input/TimePicker.vue

@@ -15,8 +15,8 @@ const model = defineModel<string | null>({
 
 const props = withDefaults(
     defineProps<{
-        size: 'base' | 'large';
-        focus: boolean;
+        size?: 'base' | 'large';
+        focus?: boolean;
     }>(),
     {
         size: 'base',
@@ -143,22 +143,24 @@ const closestValue = computed({
 <template>
     <div class="flex min-w-0 items-center justify-center text-white">
         <SelectDropdown
-            :class="twMerge('mine-w-0 w-24', size === 'large' && 'w-28')"
             v-model="closestValue"
             v-model:open="open"
+            :class="twMerge('mine-w-0 w-24', size === 'large' && 'w-28')"
             :get-key-from-item="(item: TimeOption) => item.timestamp"
             :get-name-for-item="(item: TimeOption) => item.name"
             :items="getStartOptions">
             <template #trigger>
                 <TextInput
-                    v-model="inputValue"
                     ref="timeInput"
+                    v-model="inputValue"
                     :class="
                         twMerge(
                             'text-center w-24 px-3 py-2',
                             size === 'large' && 'w-28'
                         )
                     "
+                    data-testid="time_picker_input"
+                    type="text"
                     @blur="updateTime"
                     @keydown.enter="
                         updateTime($event);
@@ -169,9 +171,7 @@ const closestValue = computed({
                     @mouseup="($event.target as HTMLInputElement).select()"
                     @click="($event.target as HTMLInputElement).select()"
                     @pointerup="($event.target as HTMLInputElement).select()"
-                    @focusin="open = true"
-                    data-testid="time_picker_input"
-                    type="text" />
+                    @focusin="open = true" />
             </template>
         </SelectDropdown>
     </div>

resources/js/packages/ui/src/Input/TimePickerSimple.vue

@@ -12,8 +12,8 @@ const model = defineModel<string | null>({
 
 const props = withDefaults(
     defineProps<{
-        size: 'base' | 'large';
-        focus: boolean;
+        size?: 'base' | 'large';
+        focus?: boolean;
     }>(),
     {
         size: 'base',
@@ -95,18 +95,18 @@ const inputValue = ref(
 <template>
     <TextInput
         v-bind="$attrs"
-        v-model="inputValue"
         ref="timeInput"
+        v-model="inputValue"
         :class="
             twMerge('text-center w-24 px-3 py-2', size === 'large' && 'w-28')
         "
+        data-testid="time_picker_input"
+        type="text"
         @blur="updateTime"
         @focus="($event.target as HTMLInputElement).select()"
         @mouseup="($event.target as HTMLInputElement).select()"
         @click="($event.target as HTMLInputElement).select()"
-        @pointerup="($event.target as HTMLInputElement).select()"
-        data-testid="time_picker_input"
-        type="text" />
+        @pointerup="($event.target as HTMLInputElement).select()" />
 </template>
 
 <style scoped></style>

resources/js/packages/ui/src/Input/TimeRangeSelector.vue

@@ -61,32 +61,32 @@ watch(focused, (newValue, oldValue) => {
             <div class="font-bold text-white text-sm pb-2">Start</div>
             <div class="space-y-2">
                 <TimePickerSimple
+                    v-model="tempStart"
                     data-testid="time_entry_range_start"
                     tabindex="0"
-                    @keydown.exact.tab.shift.stop.prevent="emit('close')"
                     :focus
-                    @changed="updateTimeEntry"
-                    v-model="tempStart"></TimePickerSimple>
+                    @keydown.exact.tab.shift.stop.prevent="emit('close')"
+                    @changed="updateTimeEntry"></TimePickerSimple>
                 <DatePicker
+                    v-model="tempStart"
                     class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
                     @changed="updateTimeEntry"
-                    @blur.stop.prevent="emit('close')"
-                    v-model="tempStart"></DatePicker>
+                    @blur.stop.prevent="emit('close')"></DatePicker>
             </div>
         </div>
         <div class="px-2">
             <div class="font-bold text-white text-sm pb-2">End</div>
             <div v-if="tempEnd !== null" class="space-y-2">
                 <TimePickerSimple
+                    v-model="tempEnd"
                     data-testid="time_entry_range_end"
-                    @changed="updateTimeEntry"
-                    v-model="tempEnd"></TimePickerSimple>
+                    @changed="updateTimeEntry"></TimePickerSimple>
                 <DatePicker
+                    v-model="tempEnd"
                     class="text-xs text-text-tertiary max-w-24 px-1.5 py-1.5"
-                    @changed="updateTimeEntry"
-                    v-model="tempEnd"></DatePicker>
+                    @changed="updateTimeEntry"></DatePicker>
             </div>
-            <div class="text-muted" v-else>-- : --</div>
+            <div v-else class="text-muted">-- : --</div>
             <div tabindex="0" @focusin="emit('close')"></div>
         </div>
     </div>