UNPKG

@opensig/opendesign

Version:

60 lines (59 loc) 2.32 kB
import { MaybeRefOrGetter, Ref } from 'vue'; import { Dayjs } from 'dayjs'; import { DisabledDateFn } from './types'; /** 日历单元格数据结构 */ export interface CalendarCell { /** 该单元格对应的 Dayjs 日期对象 */ date: Dayjs; /** 该单元格在月份中的日期数字 */ day: number; /** 是否属于当前显示月份 */ isCurrentMonth: boolean; /** 是否是今天 */ isToday: boolean; /** 是否被选中 */ isSelected: boolean; /** 是否被禁用 */ isDisabled: boolean; /** 是否是范围选择的起始日期 */ isRangeStart: boolean; /** 是否是范围选择的结束日期 */ isRangeEnd: boolean; /** 是否处于范围选择的区间内(不含端点) */ isInRange: boolean; } /** useCalendar 组合式函数的参数 */ interface UseCalendarParams { /** 当前显示的年份 */ displayYear: Ref<number>; /** 当前显示的月份(0-11) */ displayMonth: Ref<number>; /** 已选中的日期 */ selectedDate: MaybeRefOrGetter<Dayjs | null | (Dayjs | null)[]>; /** 一周的起始星期几(0=周日,1=周一,...) */ dayStartOfWeek: Ref<number>; /** 自定义禁用日期的函数,month 为 0-indexed(0=一月,11=十二月) */ disabledDate?: Ref<DisabledDateFn | undefined>; /** 可选范围的最小日期 */ minDate?: Ref<Dayjs | null>; /** 可选范围的最大日期 */ maxDate?: Ref<Dayjs | null>; /** 已确认的范围起始日期(排序后,仅选择完成时有值) */ rangeStart?: Ref<Dayjs | null>; /** 已确认的范围结束日期(排序后,仅选择完成时有值) */ rangeEnd?: Ref<Dayjs | null>; /** 第一次点击的锚点日期(选择进行中时有值,顺序无意义) */ anchorDate?: Ref<Dayjs | null>; /** 鼠标悬停的日期(用于范围选择的实时预览) */ hoverDate?: Ref<Dayjs | null>; } /** * 日历数据组合式函数 * 根据显示的年月,生成 6 行 × 7 列的日历格子数据, * 首尾不足部分由上月/下月的日期填充。 */ export declare function useCalendar(params: UseCalendarParams): { rows: import('vue').ComputedRef<CalendarCell[][]>; weekDayHeaders: import('vue').ComputedRef<number[]>; }; export {};