From b94872b07bdbcf1e4b2ad0abdb37417c5c6a8d67 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Mon, 23 Mar 2026 02:21:28 +0100
Subject: [PATCH] Add size prop to DatePicker and fix range end

---
 resources/js/packages/ui/src/Input/DatePicker.vue             | 3 ++-
 resources/js/packages/ui/src/Input/DateRangePicker.vue        | 3 ++-
 resources/js/packages/ui/src/Input/TimeRangeSelector.vue      | 4 +++-
 resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue | 2 +-
 .../ui/src/range-calendar/RangeCalendarCellTrigger.vue        | 4 ++--
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 0b823e13..d767aec1 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -16,6 +16,7 @@ import type { Organization } from '@/packages/api/src';
 const props = defineProps<{
     tabindex?: string;
     class?: string;
+    size?: 'sm' | 'default';
 }>();
 
 // This has to be a localized timestamp, not UTC
@@ -67,7 +68,7 @@ function handleDateSelect(newDate: DateValue | undefined) {
             <PopoverTrigger as-child>
                 <Button
                     variant="input"
-                    size="sm"
+                    :size="props.size ?? 'default'"
                     :tabindex="tabindex"
                     :class="['w-full px-2 gap-1.5', props.class]">
                     <CalendarIcon class="!size-3 text-muted-foreground" />
diff --git a/resources/js/packages/ui/src/Input/DateRangePicker.vue b/resources/js/packages/ui/src/Input/DateRangePicker.vue
index f3abba85..9228569f 100644
--- a/resources/js/packages/ui/src/Input/DateRangePicker.vue
+++ b/resources/js/packages/ui/src/Input/DateRangePicker.vue
@@ -58,13 +58,14 @@ const modelValue = computed<CalendarDateRange>({
     }),
     set: (newValue) => {
         if (newValue.start) {
-            console.log(newValue.start);
             const date = newValue.start.toDate(getUserTimezone());
             emit('update:start', getLocalizedDayJs(date.toString()).format());
         }
         if (newValue.end) {
             const date = newValue.end.toDate(getUserTimezone());
             emit('update:end', getLocalizedDayJs(date.toString()).format());
+        } else {
+            emit('update:end', '');
         }
     },
 });
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index c748a5e0..a24e3838 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -73,6 +73,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempStart"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
         </div>
@@ -89,6 +90,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempEnd"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
             <div v-else-if="end === null && !showEndTimePicker">
@@ -102,7 +104,7 @@ const dropdownContent = ref();
                     class="w-full"
                     data-testid="time_entry_range_end"
                     @keydown.enter.prevent.stop="confirmEndTime"></TimePickerSimple>
-                <DatePicker v-model="tempEnd" class="w-full"></DatePicker>
+                <DatePicker v-model="tempEnd" class="w-full" size="sm"></DatePicker>
                 <Button variant="outline" size="sm" class="w-full" @click="confirmEndTime">
                     Confirm
                 </Button>
diff --git a/resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue b/resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue
index 163906c1..db4e8ffb 100644
--- a/resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue
+++ b/resources/js/packages/ui/src/calendar/CalendarCellTrigger.vue
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
                 'h-8 w-8 p-0 font-normal',
                 '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
                 // Selected
-                'data-[selected]:bg-quaternary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-quaternary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+                'data-[selected]:bg-quaternary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-quaternary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-quaternary data-[selected]:focus:text-primary-foreground',
                 // Disabled
                 'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
                 // Unavailable
diff --git a/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue b/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue
index 9a637dda..0de758d3 100644
--- a/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue
+++ b/resources/js/packages/ui/src/range-calendar/RangeCalendarCellTrigger.vue
@@ -26,9 +26,9 @@ const forwardedProps = useForwardProps(delegatedProps);
                 'h-8 w-8 p-0 font-normal data-[selected]:opacity-100',
                 '[&[data-today]:not([data-selected])]:border-accent [&[data-today]:not([data-selected])]:border [&[data-today]:not([data-selected])]:text-accent-foreground',
                 // Selection Start
-                'data-[selection-start]:bg-quaternary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-quaternary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+                'data-[selection-start]:bg-quaternary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-quaternary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-quaternary data-[selection-start]:focus:text-primary-foreground',
                 // Selection End
-                'data-[selection-end]:bg-quaternary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-quaternary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+                'data-[selection-end]:bg-quaternary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-quaternary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-quaternary data-[selection-end]:focus:text-primary-foreground',
                 // Outside months
                 'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
                 // Disabled