@opensig/opendesign
Version:
60 lines (59 loc) • 2.32 kB
TypeScript
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 {};