mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-08-08 00:02:15 +01:00
Add size prop to DatePicker and fix range end
This commit is contained in:
@@ -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" />
|
||||
|
||||
@@ -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', '');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user