Munawwirul Jamal
74 lines
2.3 KiB
Vue
74 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import type { CalendarRootEmits, CalendarRootProps } from 'radix-vue'
|
|
import type { HTMLAttributes } from 'vue'
|
|
import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
|
|
import { computed } from 'vue'
|
|
import { cn } from '~/lib/utils'
|
|
|
|
import CalendarCell from './CalendarCell.vue'
|
|
import CalendarCellTrigger from './CalendarCellTrigger.vue'
|
|
import CalendarGrid from './CalendarGrid.vue'
|
|
import CalendarGridBody from './CalendarGridBody.vue'
|
|
import CalendarGridHead from './CalendarGridHead.vue'
|
|
import CalendarGridRow from './CalendarGridRow.vue'
|
|
import CalendarHeadCell from './CalendarHeadCell.vue'
|
|
import CalendarHeader from './CalendarHeader.vue'
|
|
import CalendarHeading from './CalendarHeading.vue'
|
|
import CalendarNextButton from './CalendarNextButton.vue'
|
|
import CalendarPrevButton from './CalendarPrevButton.vue'
|
|
|
|
const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
|
|
|
|
const emits = defineEmits<CalendarRootEmits>()
|
|
|
|
const delegatedProps = computed(() => {
|
|
const { class: _, ...delegated } = props
|
|
|
|
return delegated
|
|
})
|
|
|
|
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
|
</script>
|
|
|
|
<template>
|
|
<CalendarRoot
|
|
v-slot="{ grid, weekDays }"
|
|
:class="cn('p-3', props.class)"
|
|
v-bind="forwarded"
|
|
>
|
|
<CalendarHeader>
|
|
<CalendarPrevButton />
|
|
<CalendarHeading />
|
|
<CalendarNextButton />
|
|
</CalendarHeader>
|
|
|
|
<div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
|
|
<CalendarGrid v-for="month in grid" :key="month.value.toString()">
|
|
<CalendarGridHead>
|
|
<CalendarGridRow>
|
|
<CalendarHeadCell
|
|
v-for="day in weekDays" :key="day"
|
|
>
|
|
{{ day }}
|
|
</CalendarHeadCell>
|
|
</CalendarGridRow>
|
|
</CalendarGridHead>
|
|
<CalendarGridBody>
|
|
<CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
|
|
<CalendarCell
|
|
v-for="weekDate in weekDates"
|
|
:key="weekDate.toString()"
|
|
:date="weekDate"
|
|
>
|
|
<CalendarCellTrigger
|
|
:day="weekDate"
|
|
:month="month.value"
|
|
/>
|
|
</CalendarCell>
|
|
</CalendarGridRow>
|
|
</CalendarGridBody>
|
|
</CalendarGrid>
|
|
</div>
|
|
</CalendarRoot>
|
|
</template>
|