Add size prop to DatePicker and fix range end

This commit is contained in:
Gregor Vostrak
2026-03-23 02:21:28 +01:00
parent 12bbbf64e9
commit b94872b07b
5 changed files with 10 additions and 6 deletions

View File

@@ -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" />

View File

@@ -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', '');
}
},
});

View File

@@ -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>

View File

@@ -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

View File

@@ -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