@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/calendar/CalendarRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,30 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useCalendarContext } from "./use-calendar.js";
+import { createBlock, createCommentVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, unref, withCtx } from "vue";
+//#region src/components/calendar/CalendarRow.vue?vue&type=script&setup=true&lang.ts
+var CalendarRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CalendarRow",
+	inheritAttrs: false,
+	__name: "CalendarRow",
+	props: {
+		view: {},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const calendar = useCalendarContext();
+		const merged = usePartProps(calendar.rowProps);
+		return (_ctx, _cache) => {
+			return !props.view || props.view === unref(calendar).state.value.view ? (openBlock(), createBlock(unref(Part), mergeProps({
+				key: 0,
+				as: props.as
+			}, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(calendar).state.value)))]),
+				_: 3
+			}, 16, ["as"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { CalendarRow_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/calendar/CalendarViewTrigger.js

@@ -0,0 +1,5 @@
+import CalendarViewTrigger_vue_vue_type_script_setup_true_lang_default from "./CalendarViewTrigger.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/CalendarViewTrigger.vue
+var CalendarViewTrigger_default = CalendarViewTrigger_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CalendarViewTrigger_default as default };

package/dist/components/calendar/CalendarViewTrigger.vue.d.ts

@@ -0,0 +1,25 @@
+import { type CalendarView, type CalendarState } from './use-calendar';
+type __VLS_Props = {
+    /** Which grid it opens, and closes again back to the days. */
+    value: Exclude<CalendarView, 'day'>;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    /**
+     * The calendar's state, for the slot only: the element carries none of it.
+     * @slotOnly
+     */
+    default(props: CalendarState): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/calendar/CalendarViewTrigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,28 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useCalendarContext } from "./use-calendar.js";
+import { computed, createBlock, createTextVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toDisplayString, unref, withCtx } from "vue";
+//#region src/components/calendar/CalendarViewTrigger.vue?vue&type=script&setup=true&lang.ts
+var CalendarViewTrigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CalendarViewTrigger",
+	inheritAttrs: false,
+	__name: "CalendarViewTrigger",
+	props: {
+		value: {},
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const calendar = useCalendarContext();
+		const merged = usePartProps(() => calendar.getViewTriggerProps(props.value));
+		const label = computed(() => props.value === "month" ? calendar.state.value.monthLabel : calendar.state.value.yearLabel);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(calendar).state.value)), () => [createTextVNode(toDisplayString(label.value), 1)])]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { CalendarViewTrigger_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/calendar/CalendarWeek.js

@@ -0,0 +1,5 @@
+import CalendarWeek_vue_vue_type_script_setup_true_lang_default, { provideCalendarWeek, useCalendarWeek } from "./CalendarWeek.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/CalendarWeek.vue
+var CalendarWeek_default = CalendarWeek_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CalendarWeek_default as default, provideCalendarWeek, useCalendarWeek };

package/dist/components/calendar/CalendarWeek.vue.d.ts

@@ -0,0 +1,29 @@
+export declare const provideCalendarWeek: (value: () => Date[]) => () => Date[], useCalendarWeek: () => (() => Date[]) | null;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /** Element or component to render. */
+    as?: string | object;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    /** Element or component to render. */
+    as?: string | object;
+}> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /**
+     * A `CalendarDay` without a `value`, which renders the week's seven days.
+     * The week, for the slot only: the row carries none of it.
+     * @slotOnly
+     */
+    default(props: {
+        /** The week's days. */
+        days: Date[];
+        /** Which week of the month, from `0`. */
+        index: number;
+    }): unknown;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/calendar/CalendarWeek.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,48 @@
+import { Part } from "../../shared/part.js";
+import { createContext } from "../../shared/context.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useCalendarContext } from "./use-calendar.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, unref, withCtx } from "vue";
+//#region src/components/calendar/CalendarWeek.vue?vue&type=script&setup=true&lang.ts
+var { provideContext: provideCalendarWeek, useOptionalContext: useCalendarWeek } = createContext("CalendarWeek");
+/** Hands one week's days to the `CalendarDay` in its row. */
+var WeekScope = defineComponent({
+	props: { days: {
+		type: Array,
+		required: true
+	} },
+	setup(props, { slots }) {
+		provideCalendarWeek(() => props.days);
+		return () => slots.default?.();
+	}
+});
+var CalendarWeek_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CalendarWeek",
+	inheritAttrs: false,
+	__name: "CalendarWeek",
+	props: { as: { default: "div" } },
+	setup(__props) {
+		const props = __props;
+		const calendar = useCalendarContext();
+		const merged = usePartProps(calendar.rowProps);
+		return (_ctx, _cache) => {
+			return unref(calendar).state.value.view === "day" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(calendar).weeks.value, (days, index) => {
+				return openBlock(), createBlock(unref(WeekScope), {
+					key: index,
+					days
+				}, {
+					default: withCtx(() => [createVNode(unref(Part), mergeProps({ as: props.as }, { ref_for: true }, unref(merged)), {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+							days,
+							index
+						})]),
+						_: 2
+					}, 1040, ["as"])]),
+					_: 2
+				}, 1032, ["days"]);
+			}), 128)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { CalendarWeek_vue_vue_type_script_setup_true_lang_default as default, provideCalendarWeek, useCalendarWeek };

package/dist/components/calendar/CalendarWeekDay.js

@@ -0,0 +1,5 @@
+import CalendarWeekDay_vue_vue_type_script_setup_true_lang_default from "./CalendarWeekDay.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/CalendarWeekDay.vue
+var CalendarWeekDay_default = CalendarWeekDay_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CalendarWeekDay_default as default };

package/dist/components/calendar/CalendarWeekDay.vue.d.ts

@@ -0,0 +1,44 @@
+import type { WeekDay } from '@vunset/utils';
+type __VLS_Props = {
+    /** Which day of the week, `0` (Sunday) to `6`. Without it, it renders all seven, in the day view only. */
+    value?: WeekDay;
+    /** Element or component to render. */
+    as?: string | object;
+};
+type __VLS_Slots = {
+    default(props: {
+        /**
+         * `0` (Sunday) to `6`.
+         * @attribute `data-value="…"`
+         */
+        index: WeekDay;
+        /**
+         * The full name: "Monday".
+         * @attribute none
+         */
+        long: string;
+        /**
+         * The short name: "Mon".
+         * @attribute none
+         */
+        short: string;
+        /**
+         * The narrowest name: "M".
+         * @attribute none
+         */
+        narrow: string;
+        /** Whether it is a Saturday or Sunday. */
+        weekend: boolean;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/calendar/CalendarWeekDay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { useCalendarContext } from "./use-calendar.js";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useAttrs, withCtx } from "vue";
+//#region src/components/calendar/CalendarWeekDay.vue?vue&type=script&setup=true&lang.ts
+var CalendarWeekDay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CalendarWeekDay",
+	inheritAttrs: false,
+	__name: "CalendarWeekDay",
+	props: {
+		value: {},
+		as: { default: "div" }
+	},
+	setup(__props) {
+		const props = __props;
+		const calendar = useCalendarContext();
+		const attrs = useAttrs();
+		const values = computed(() => {
+			if (props.value !== void 0) return [props.value];
+			return calendar.state.value.view === "day" ? calendar.weekDays.value.map((day) => day.index) : [];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (day) => {
+				return openBlock(), createBlock(unref(Part), mergeProps({
+					as: props.as,
+					key: day
+				}, { ref_for: true }, unref(mergeProps$1)(unref(calendar).getWeekDayProps(day), unref(attrs))), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, unref(calendar).getWeekDayState(day)), () => [createTextVNode(toDisplayString(unref(calendar).getWeekDayState(day).short), 1)])]),
+					_: 2
+				}, 1040, ["as"]);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { CalendarWeekDay_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/calendar/CalendarYear.js

@@ -0,0 +1,5 @@
+import CalendarYear_vue_vue_type_script_setup_true_lang_default from "./CalendarYear.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/calendar/CalendarYear.vue
+var CalendarYear_default = CalendarYear_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CalendarYear_default as default };

package/dist/components/calendar/CalendarYear.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** The year it stands for. Without it, it renders every year on the page, in the year view only. */
+    value?: number;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_7: {
+    year: number;
+    selected: boolean;
+    current: boolean;
+    disabled: boolean;
+    highlighted: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/calendar/CalendarYear.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,36 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { useCalendarContext } from "./use-calendar.js";
+import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, unref, useAttrs, withCtx } from "vue";
+//#region src/components/calendar/CalendarYear.vue?vue&type=script&setup=true&lang.ts
+var CalendarYear_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "CalendarYear",
+	inheritAttrs: false,
+	__name: "CalendarYear",
+	props: {
+		value: {},
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const calendar = useCalendarContext();
+		const attrs = useAttrs();
+		const values = computed(() => {
+			if (props.value !== void 0) return [props.value];
+			return calendar.state.value.view === "year" ? calendar.years.value : [];
+		});
+		return (_ctx, _cache) => {
+			return openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (year) => {
+				return openBlock(), createBlock(unref(Part), mergeProps({
+					as: props.as,
+					key: year
+				}, { ref_for: true }, unref(mergeProps$1)(unref(calendar).getYearProps(year), unref(attrs))), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, unref(calendar).getYearState(year)), () => [createTextVNode(toDisplayString(year), 1)])]),
+					_: 2
+				}, 1040, ["as"]);
+			}), 128);
+		};
+	}
+});
+//#endregion
+export { CalendarYear_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/calendar/use-calendar.d.ts

@@ -0,0 +1,267 @@
+import type { ModelModifiers } from '../../shared/model-modifiers';
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type DateInput, type DatePresetKey, type WeekDay, type WeekDayName } from '@vunset/utils';
+export type CalendarSelectionMode = 'single' | 'range' | 'multiple';
+export type CalendarView = 'day' | 'month' | 'year';
+export type CalendarValue = Date | Date[] | null;
+export type CalendarValueInput = DateInput | DateInput[];
+/**
+ * `v-model.iso` emits `YYYY-MM-DD` strings; `.safe` steps today back while UTC is still on yesterday;
+ * `.optional` writes `undefined` once emptied.
+ */
+export interface CalendarModelModifiers extends ModelModifiers {
+    iso?: boolean;
+    safe?: boolean;
+}
+/** The value as `v-model` receives it: dates, or `YYYY-MM-DD` strings with `.iso`. */
+export type CalendarModelValue = CalendarValue | string | string[];
+export declare const YEARS_PER_PAGE = 12;
+export interface CalendarState {
+    /** `single`, `range` or `multiple`. */
+    mode: CalendarSelectionMode;
+    /** Which grid is showing: days, months or years. */
+    view: CalendarView;
+    /**
+     * The month on screen, `0`–`11`.
+     * @attribute none
+     */
+    month: number;
+    /**
+     * The year on screen.
+     * @attribute none
+     */
+    year: number;
+    /**
+     * The month's name, in the calendar's locale.
+     * @attribute none
+     */
+    monthLabel: string;
+    /**
+     * The year, as written in the calendar's locale.
+     * @attribute none
+     */
+    yearLabel: string;
+    /**
+     * Every selected day, in order.
+     * @attribute none
+     */
+    selected: Date[];
+    /** Whether a range has its start picked and waits for its end. */
+    selecting: boolean;
+    /** Whether nothing is selected. */
+    empty: boolean;
+    /** Whether it ignores interaction. */
+    disabled: boolean;
+    /** Whether it can be walked but nothing picked. */
+    readOnly: boolean;
+    /** Whether a day must be picked. Announced, not enforced: the page validates. */
+    required: boolean;
+    /** Whether the value is invalid. */
+    invalid: boolean;
+}
+export interface CalendarDayState {
+    /**
+     * The day itself.
+     * @attribute none
+     */
+    date: Date;
+    /** Whether it is picked: a single day, either end of a range, or one of several. */
+    selected: boolean;
+    /**
+     * Whether it starts the range.
+     * @attribute `data-range-start` while true
+     */
+    rangeStart: boolean;
+    /**
+     * Whether it ends the range.
+     * @attribute `data-range-end` while true
+     */
+    rangeEnd: boolean;
+    /**
+     * Whether it lies between the range's ends.
+     * @attribute `data-in-range` while true
+     */
+    inRange: boolean;
+    /** Whether it is in the range the pointer would make, while a range waits for its end. */
+    preview: boolean;
+    /** Whether it belongs to the month before or after the one on screen. */
+    outside: boolean;
+    /** Whether it is today. */
+    today: boolean;
+    /** Whether it is a Saturday or Sunday. */
+    weekend: boolean;
+    /** Whether it can't be picked: outside `min`/`max`, or ruled out. */
+    disabled: boolean;
+    /** Whether it holds the keyboard's place in the grid. */
+    highlighted: boolean;
+}
+export interface CalendarMonthState {
+    /**
+     * `0`–`11`.
+     * @attribute none
+     */
+    month: number;
+    /**
+     * Its name, in the calendar's locale.
+     * @attribute none
+     */
+    label: string;
+    /** Whether it is the month on screen. */
+    selected: boolean;
+    /** Whether it is this month. */
+    current: boolean;
+    /** Whether none of its days can be picked. */
+    disabled: boolean;
+    /** Whether it holds the keyboard's place in the grid. */
+    highlighted: boolean;
+}
+export interface CalendarYearState {
+    /**
+     * The year.
+     * @attribute none
+     */
+    year: number;
+    /** Whether it is the year on screen. */
+    selected: boolean;
+    /** Whether it is this year. */
+    current: boolean;
+    /** Whether none of its days can be picked. */
+    disabled: boolean;
+    /** Whether it holds the keyboard's place in the grid. */
+    highlighted: boolean;
+}
+export interface CalendarWeekDayState extends WeekDayName {
+    weekend: boolean;
+}
+export interface CalendarPresetOption {
+    key: string;
+    label?: string;
+    range?: () => [DateInput, DateInput];
+}
+export type CalendarPresetInput = DatePresetKey | CalendarPresetOption;
+/** `base`: today, yesterday, the last 7 and 30 days, this and last month. `all`: those, this year and the quarters. */
+export type CalendarPresetGroup = 'base' | 'all';
+/** A group, or a list of presets and groups (`['base', 'this-year']`). A key listed twice shows once. */
+export type CalendarPresetsInput = (CalendarPresetInput | CalendarPresetGroup)[] | CalendarPresetGroup;
+export interface CalendarPresetItem {
+    /**
+     * Which preset it is.
+     * @attribute `data-value="…"`
+     */
+    key: string;
+    /**
+     * What it is called.
+     * @attribute none
+     */
+    label: string;
+    /**
+     * The first and last day it selects.
+     * @attribute none
+     */
+    range: [Date, Date];
+    /** Whether it can't be applied: its days fall outside `min`/`max`, or it is a quarter yet to start. */
+    disabled: boolean;
+}
+export interface UseCalendarOptions {
+    /** @default 'single' */
+    mode?: MaybeRefOrGetter<CalendarSelectionMode | undefined>;
+    /** The selection. Supplying this makes the value controlled. */
+    value?: MaybeRefOrGetter<CalendarValueInput | undefined>;
+    /** The selection while uncontrolled. */
+    defaultValue?: MaybeRefOrGetter<CalendarValueInput | undefined>;
+    /** Which month opens, when nothing is selected to open on. */
+    defaultMonth?: MaybeRefOrGetter<DateInput>;
+    /** Nothing before this day can be picked, and the arrows stop at it. */
+    min?: MaybeRefOrGetter<DateInput>;
+    /** Nothing after this day can be picked. `new Date()` for "up to today". */
+    max?: MaybeRefOrGetter<DateInput>;
+    /** Nothing after today can be picked; the earlier of the two with `max`. */
+    maxToday?: MaybeRefOrGetter<boolean | undefined>;
+    /** Individual days to rule out. */
+    disabledDates?: MaybeRefOrGetter<DateInput[] | undefined>;
+    /** Rules out days a list cannot express — every weekend, every holiday. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** `0` is Sunday. Defaults to the locale's. */
+    firstDayOfWeek?: MaybeRefOrGetter<WeekDay | undefined>;
+    /**
+     * Always draw six rows, so the calendar does not change height between a
+     * 28-day February and a month that spills into a sixth week
+     *
+     * @default false
+     */
+    fixedWeeks?: MaybeRefOrGetter<boolean | undefined>;
+    /** Names the months and the weekdays. Defaults to the runtime's locale. */
+    locale?: MaybeRefOrGetter<Intl.LocalesArgument>;
+    /** The presets offered: a list, or `base` / `all`. @default `base` */
+    presets?: MaybeRefOrGetter<CalendarPresetsInput | undefined>;
+    /** A preset key whose days are the starting value, used while the value is empty. */
+    preset?: MaybeRefOrGetter<string | undefined>;
+    /** Whether the rolling presets — last 7 days, last 30 — end today or yesterday. @default false */
+    includeToday?: MaybeRefOrGetter<boolean | undefined>;
+    /** Everything is inert and announced as off. Also read from a surrounding field. */
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    /** Also read from a surrounding field. */
+    readOnly?: MaybeRefOrGetter<boolean | undefined>;
+    /** Also read from a surrounding field. */
+    required?: MaybeRefOrGetter<boolean | undefined>;
+    /** Also read from a surrounding field. */
+    invalid?: MaybeRefOrGetter<boolean | undefined>;
+    /** The form field name the days are submitted under. Also read from a surrounding field. */
+    name?: MaybeRefOrGetter<string | undefined>;
+    /** The id of a `<form>` to submit with. */
+    form?: MaybeRefOrGetter<string | undefined>;
+    /** Marks the day Tab reaches `autofocus`, so a popup that opens around it starts there. */
+    autofocusDay?: MaybeRefOrGetter<boolean | undefined>;
+    /** Called whenever the selection changes. */
+    onChange?: (value: CalendarValue) => void;
+}
+export interface UseCalendarReturn {
+    value: WritableComputedRef<CalendarValue>;
+    state: ComputedRef<CalendarState>;
+    selection: Ref<Date[]>;
+    weeks: ComputedRef<Date[][]>;
+    weekDays: ComputedRef<WeekDayName[]>;
+    months: ComputedRef<string[]>;
+    years: ComputedRef<number[]>;
+    presets: ComputedRef<CalendarPresetItem[]>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    /** One hidden input per submitted day, `YYYY-MM-DD`. */
+    hiddenInputs: ComputedRef<Array<{
+        name: string;
+        value: string;
+        form: string | undefined;
+    }>>;
+    gridProps: ComputedRef<Record<string, unknown>>;
+    rowProps: ComputedRef<Record<string, unknown>>;
+    prevProps: ComputedRef<Record<string, unknown>>;
+    nextProps: ComputedRef<Record<string, unknown>>;
+    presetsProps: ComputedRef<Record<string, unknown>>;
+    getDayProps: (date: Date) => Record<string, unknown>;
+    getDayState: (date: Date) => CalendarDayState;
+    getWeekDayProps: (index: WeekDay) => Record<string, unknown>;
+    getWeekDayState: (index: WeekDay) => CalendarWeekDayState;
+    getMonthProps: (month: number) => Record<string, unknown>;
+    getMonthState: (month: number) => CalendarMonthState;
+    getYearProps: (year: number) => Record<string, unknown>;
+    getYearState: (year: number) => CalendarYearState;
+    getViewTriggerProps: (view: Exclude<CalendarView, 'day'>) => Record<string, unknown>;
+    getPresetProps: (key: string) => Record<string, unknown>;
+    getPresetState: (key: string) => CalendarPresetItem | undefined;
+    /** Picks a day, exactly as pressing it would. */
+    select: (date: Date) => void;
+    /** Drops the selection. */
+    clear: () => void;
+    /** Applies a preset by key. */
+    applyPreset: (key: string) => void;
+    /** Closes a range that has only one end onto that same day. */
+    completeRange: () => void;
+    setView: (view: CalendarView) => void;
+    /** Moves the month, year or year-page on screen, as the arrows do. */
+    goto: (direction: 1 | -1) => void;
+    /** @internal Shared with the parts. */ isDayDisabled: (date: Date) => boolean;
+    /** @internal */ cursor: Ref<Date>;
+}
+export declare function useCalendar(options?: UseCalendarOptions): UseCalendarReturn;
+/** The value as `v-model` writes it back, through its modifiers. */
+export declare function serializeCalendarValue(value: CalendarValue, modifiers?: CalendarModelModifiers): CalendarModelValue;
+export declare const provideCalendarContext: (value: UseCalendarReturn) => UseCalendarReturn, useCalendarContext: () => UseCalendarReturn;