46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script lang="ts">
|
|
import type { PrimitiveProps } from '../primitive';
|
|
|
|
/**
|
|
* The `role="grid"` table for a single month. Provides grid context (the month
|
|
* it renders) to its head/body cells; render one per visible month when
|
|
* `numberOfMonths > 1`.
|
|
*/
|
|
export interface CalendarGridProps extends PrimitiveProps {
|
|
/** The month this grid represents. Defaults to the root placeholder's month. */
|
|
month?: Date;
|
|
}
|
|
</script>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, toRef } from 'vue';
|
|
import { Primitive } from '../primitive';
|
|
import { provideCalendarGridContext, useCalendarRootContext } from './context';
|
|
|
|
const { as = 'table', month } = defineProps<CalendarGridProps>();
|
|
|
|
const ctx = useCalendarRootContext();
|
|
const monthRef = toRef(() => month ?? ctx.placeholder.value);
|
|
|
|
provideCalendarGridContext({ month: monthRef });
|
|
|
|
const readonly = computed(() => ctx.readonly.value || undefined);
|
|
const disabled = computed(() => ctx.disabled.value || undefined);
|
|
</script>
|
|
|
|
<template>
|
|
<Primitive
|
|
:as="as"
|
|
role="grid"
|
|
tabindex="-1"
|
|
:aria-label="ctx.fullCalendarLabel.value"
|
|
:aria-readonly="readonly ? true : undefined"
|
|
:aria-disabled="disabled ? true : undefined"
|
|
:data-primitives-calendar-grid="''"
|
|
:data-readonly="readonly ? '' : undefined"
|
|
:data-disabled="disabled ? '' : undefined"
|
|
>
|
|
<slot />
|
|
</Primitive>
|
|
</template>
|