@cn-ui/core
Version:
The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.
111 lines (110 loc) • 4.72 kB
TypeScript
import { type Atom, type DateCalendarConfig, type JSXSlot, dayjs } from "@cn-ui/reactive";
import type { Dayjs } from "@cn-ui/reactive";
export interface CalendarProps extends DateCalendarConfig {
Cell?: JSXSlot<{
date: Dayjs;
model: Atom<Dayjs[]>;
}>;
/**
* 日历选择模式
* @tested
*/
mode?: "single" | "multiple" | "range";
/**
* 日历视图
* @tested
*/
view?: "year" | "month" | "day";
locales?: Intl.LocalesArgument;
}
export declare const CalenderCtx: {
use<D = {
calendarShowingType: Atom<NonNullable<CalendarProps["view"]>>;
} & {
selectedDate: Atom<dayjs.Dayjs[]>;
mode: import("solid-js").Accessor<"single" | "multiple" | "range">;
calendarUnit: import("solid-js").Accessor<"day" | "month" | "year">;
isSelected: (d: Dayjs, u?: "day" | "month" | "year") => boolean;
isStartDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isEndDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isSelectingEnd: () => boolean;
virtualEndTime: Atom<dayjs.Dayjs>;
toggleSelect(d: Dayjs, state?: boolean): dayjs.Dayjs[];
} & {
targetDate: Atom<dayjs.Dayjs>;
allDateInMonth: import("solid-js").Accessor<{
firstDateOfCalendar: dayjs.Dayjs;
lastDateOfCalendar: dayjs.Dayjs;
firstDateOfMonth: dayjs.Dayjs;
lastDateOfMonth: dayjs.Dayjs;
dayInMonth: dayjs.Dayjs[];
paddingStart: dayjs.Dayjs[];
paddingEnd: dayjs.Dayjs[];
}>;
extraStartWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
extraEndWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
monthHeader(): string[];
weekHeader(): string[];
isInMonth(date: Dayjs): boolean;
}>(): D;
id: symbol;
Provider: import("solid-js").ContextProviderComponent<({
calendarShowingType: Atom<NonNullable<CalendarProps["view"]>>;
} & {
selectedDate: Atom<dayjs.Dayjs[]>;
mode: import("solid-js").Accessor<"single" | "multiple" | "range">;
calendarUnit: import("solid-js").Accessor<"day" | "month" | "year">;
isSelected: (d: Dayjs, u?: "day" | "month" | "year") => boolean;
isStartDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isEndDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isSelectingEnd: () => boolean;
virtualEndTime: Atom<dayjs.Dayjs>;
toggleSelect(d: Dayjs, state?: boolean): dayjs.Dayjs[];
} & {
targetDate: Atom<dayjs.Dayjs>;
allDateInMonth: import("solid-js").Accessor<{
firstDateOfCalendar: dayjs.Dayjs;
lastDateOfCalendar: dayjs.Dayjs;
firstDateOfMonth: dayjs.Dayjs;
lastDateOfMonth: dayjs.Dayjs;
dayInMonth: dayjs.Dayjs[];
paddingStart: dayjs.Dayjs[];
paddingEnd: dayjs.Dayjs[];
}>;
extraStartWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
extraEndWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
monthHeader(): string[];
weekHeader(): string[];
isInMonth(date: Dayjs): boolean;
}) | undefined>;
defaultValue: ({
calendarShowingType: Atom<NonNullable<CalendarProps["view"]>>;
} & {
selectedDate: Atom<dayjs.Dayjs[]>;
mode: import("solid-js").Accessor<"single" | "multiple" | "range">;
calendarUnit: import("solid-js").Accessor<"day" | "month" | "year">;
isSelected: (d: Dayjs, u?: "day" | "month" | "year") => boolean;
isStartDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isEndDate(d: Dayjs, u?: "day" | "month" | "year"): boolean;
isSelectingEnd: () => boolean;
virtualEndTime: Atom<dayjs.Dayjs>;
toggleSelect(d: Dayjs, state?: boolean): dayjs.Dayjs[];
} & {
targetDate: Atom<dayjs.Dayjs>;
allDateInMonth: import("solid-js").Accessor<{
firstDateOfCalendar: dayjs.Dayjs;
lastDateOfCalendar: dayjs.Dayjs;
firstDateOfMonth: dayjs.Dayjs;
lastDateOfMonth: dayjs.Dayjs;
dayInMonth: dayjs.Dayjs[];
paddingStart: dayjs.Dayjs[];
paddingEnd: dayjs.Dayjs[];
}>;
extraStartWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
extraEndWeek: import("solid-js").Accessor<dayjs.Dayjs[]>;
monthHeader(): string[];
weekHeader(): string[];
isInMonth(date: Dayjs): boolean;
}) | undefined;
};
export declare const Calendar: import("solid-js").Component<import("@cn-ui/reactive").OriginComponentOutputType<CalendarProps, HTMLDivElement, dayjs.Dayjs[]>>;