range-calendar

1<script lang="ts" setup>
2import type { RangeCalendarRootEmits, RangeCalendarRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { RangeCalendarRoot, useForwardPropsEmits } from "reka-ui"
6import { cn } from "@/lib/utils"
7import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from "."
8 
9const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes["class"] }>()
10 
11const emits = defineEmits<RangeCalendarRootEmits>()
12 
13const delegatedProps = reactiveOmit(props, "class")
14 
15const forwarded = useForwardPropsEmits(delegatedProps, emits)
16</script>
17 
18<template>
19  <RangeCalendarRoot
20    v-slot="{ grid, weekDays }"
21    :class="cn('p-3', props.class)"
22    v-bind="forwarded"
23  >
24    <RangeCalendarHeader>
25      <RangeCalendarPrevButton />
26      <RangeCalendarHeading />
27      <RangeCalendarNextButton />
28    </RangeCalendarHeader>
29 
30    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
31      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
32        <RangeCalendarGridHead>
33          <RangeCalendarGridRow>
34            <RangeCalendarHeadCell
35              v-for="day in weekDays" :key="day"
36            >
37              {{ day }}
38            </RangeCalendarHeadCell>
39          </RangeCalendarGridRow>
40        </RangeCalendarGridHead>
41        <RangeCalendarGridBody>
42          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
43            <RangeCalendarCell
44              v-for="weekDate in weekDates"
45              :key="weekDate.toString()"
46              :date="weekDate"
47            >
48              <RangeCalendarCellTrigger
49                :day="weekDate"
50                :month="month.value"
51              />
52            </RangeCalendarCell>
53          </RangeCalendarGridRow>
54        </RangeCalendarGridBody>
55      </RangeCalendarGrid>
56    </div>
57  </RangeCalendarRoot>
58</template>