feat: implement date panels

packages/core/src/useCalendar/constants.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from 'vue';
+import { CalendarContext } from './types';
+
+export const CalendarContextKey: InjectionKey<CalendarContext> = Symbol('CalendarContext');

packages/core/src/useCalendar/types.ts

@@ -1,4 +1,8 @@
 import { Temporal } from '@js-temporal/polyfill';
+import { MaybeRefOrGetter } from 'vue';
+import { WeekInfo } from '../i18n/getWeekInfo';
+import { Ref } from 'vue';
+import { Maybe } from '../types';
 
 export type CalendarIdentifier =
   | 'buddhist'
@@ -20,18 +24,50 @@ export type CalendarIdentifier =
   | 'persian'
   | 'roc';
 
-export interface CalendarDay {
+export interface CalendarDayCell {
+  type: 'day';
   value: Temporal.ZonedDateTime;
-
   dayOfMonth: number;
-
+  label: string;
   isToday: boolean;
-
   isOutsideMonth: boolean;
-
   selected: boolean;
+  disabled: boolean;
+  focused: boolean;
+}
 
+export interface CalendarMonthCell {
+  type: 'month';
+  label: string;
+  value: Temporal.ZonedDateTime;
+  monthOfYear: number;
+  selected: boolean;
   disabled: boolean;
+  focused: boolean;
+}
 
+export interface CalendarYearCell {
+  type: 'year';
+  label: string;
+  value: Temporal.ZonedDateTime;
+  year: number;
+  selected: boolean;
+  disabled: boolean;
   focused: boolean;
 }
+
+export type CalendarCellProps = CalendarDayCell | CalendarMonthCell | CalendarYearCell;
+
+export type CalendarPanelType = 'day' | 'month' | 'year';
+
+export interface CalendarContext {
+  locale: Ref<string>;
+  weekInfo: Ref<WeekInfo>;
+  calendar: Ref<CalendarIdentifier>;
+  selectedDate: MaybeRefOrGetter<Temporal.ZonedDateTime>;
+  getMinDate: () => Maybe<Temporal.ZonedDateTime>;
+  getMaxDate: () => Maybe<Temporal.ZonedDateTime>;
+  getFocusedDate: () => Temporal.ZonedDateTime;
+  setFocusedDate: (date: Temporal.ZonedDateTime) => void;
+  setDate: (date: Temporal.ZonedDateTime, panel?: CalendarPanelType) => void;
+}