104 lines
3.5 KiB
Vue
104 lines
3.5 KiB
Vue
<script setup>
|
|
import { reactiveOmit } from "@vueuse/core";
|
|
import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
RangeCalendarCell,
|
|
RangeCalendarCellTrigger,
|
|
RangeCalendarGrid,
|
|
RangeCalendarGridBody,
|
|
RangeCalendarGridHead,
|
|
RangeCalendarGridRow,
|
|
RangeCalendarHeadCell,
|
|
RangeCalendarHeader,
|
|
RangeCalendarHeading,
|
|
RangeCalendarNextButton,
|
|
RangeCalendarPrevButton,
|
|
} from ".";
|
|
|
|
const props = defineProps({
|
|
defaultPlaceholder: { type: null, required: false },
|
|
defaultValue: { type: Object, required: false },
|
|
modelValue: { type: [Object, null], required: false },
|
|
placeholder: { type: null, required: false },
|
|
allowNonContiguousRanges: { type: Boolean, required: false },
|
|
pagedNavigation: { type: Boolean, required: false },
|
|
preventDeselect: { type: Boolean, required: false },
|
|
maximumDays: { type: Number, required: false },
|
|
weekStartsOn: { type: Number, required: false },
|
|
weekdayFormat: { type: String, required: false },
|
|
calendarLabel: { type: String, required: false },
|
|
fixedWeeks: { type: Boolean, required: false },
|
|
maxValue: { type: null, required: false },
|
|
minValue: { type: null, required: false },
|
|
locale: { type: String, required: false },
|
|
numberOfMonths: { type: Number, required: false },
|
|
disabled: { type: Boolean, required: false },
|
|
readonly: { type: Boolean, required: false },
|
|
initialFocus: { type: Boolean, required: false },
|
|
isDateDisabled: { type: Function, required: false },
|
|
isDateUnavailable: { type: Function, required: false },
|
|
isDateHighlightable: { type: Function, required: false },
|
|
dir: { type: String, required: false },
|
|
nextPage: { type: Function, required: false },
|
|
prevPage: { type: Function, required: false },
|
|
disableDaysOutsideCurrentView: { type: Boolean, required: false },
|
|
fixedDate: { type: String, required: false },
|
|
asChild: { type: Boolean, required: false },
|
|
as: { type: null, required: false },
|
|
class: { type: null, required: false },
|
|
});
|
|
|
|
const emits = defineEmits([
|
|
"update:modelValue",
|
|
"update:validModelValue",
|
|
"update:placeholder",
|
|
"update:startValue",
|
|
]);
|
|
|
|
const delegatedProps = reactiveOmit(props, "class");
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
|
</script>
|
|
|
|
<template>
|
|
<RangeCalendarRoot
|
|
v-slot="{ grid, weekDays }"
|
|
:class="cn('p-3', props.class)"
|
|
v-bind="forwarded"
|
|
>
|
|
<RangeCalendarHeader>
|
|
<RangeCalendarPrevButton />
|
|
<RangeCalendarHeading />
|
|
<RangeCalendarNextButton />
|
|
</RangeCalendarHeader>
|
|
|
|
<div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
|
|
<RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
|
|
<RangeCalendarGridHead>
|
|
<RangeCalendarGridRow>
|
|
<RangeCalendarHeadCell v-for="day in weekDays" :key="day">
|
|
{{ day }}
|
|
</RangeCalendarHeadCell>
|
|
</RangeCalendarGridRow>
|
|
</RangeCalendarGridHead>
|
|
<RangeCalendarGridBody>
|
|
<RangeCalendarGridRow
|
|
v-for="(weekDates, index) in month.rows"
|
|
:key="`weekDate-${index}`"
|
|
class="mt-2 w-full"
|
|
>
|
|
<RangeCalendarCell
|
|
v-for="weekDate in weekDates"
|
|
:key="weekDate.toString()"
|
|
:date="weekDate"
|
|
>
|
|
<RangeCalendarCellTrigger :day="weekDate" :month="month.value" />
|
|
</RangeCalendarCell>
|
|
</RangeCalendarGridRow>
|
|
</RangeCalendarGridBody>
|
|
</RangeCalendarGrid>
|
|
</div>
|
|
</RangeCalendarRoot>
|
|
</template>
|