@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/date/TimePicker.js

@@ -0,0 +1,206 @@
+import { useLang } from "../config/context.js";
+import { mergePartProps } from "../utils/props.js";
+import { Button } from "../base/Button.js";
+import { parseIsoTime, toIsoTime } from "../utils/data/date.js";
+import { useFormat } from "../config/lang/format.js";
+import { openSetter } from "../utils/dom/open-change.js";
+import { useFieldControl } from "../form/Field.js";
+import { Listbox } from "../input/Listbox.js";
+import { useDateLocale } from "./date-locale.js";
+import { usePickerPopover } from "./picker-popover.js";
+import { TimeField, toTime } from "./TimeField.js";
+import { Fragment, computed, createVNode, mergeProps } from "vue";
+import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Clock } from "@lucide/icons";
+import { Time, now } from "@internationalized/date";
+//#region src/date/TimePicker.tsx
+/**
+* 时间选择器：TimeField 加一个打开时间列表的按钮，按 step 列出可选的时间（同 Google 日历的时间下拉）；可以直接键入，也可以点选。
+* 参考 Mantine TimePicker 的 presets、MUI 的 digital clock；列表是 Listbox（↑↓、Home / End、按数字跳转）。
+*
+*   <Field label="开会时间"><TimePicker _value={time} min="09:00" max="18:00" /></Field>
+*   <TimePicker step={15} _value={time} aria-label="提醒时间" />
+*
+* 值同 TimeField（'HH:mm'，或 Time）。列表从 min（默认 00:00）起每 step 分钟一项，到 max 为止，按语言的 12 / 24 小时制显示；
+* 不在列表里的时间（14:47）照样能键入；isTimeUnavailable 的时间在列表里不可用、键入时显示出错。
+* 列表下方“此刻”选当前时间（此刻不可选时不可用）。选好后关闭，焦点回到按钮；Esc、点外部关闭，分段里 Alt + ↓ 打开。
+*
+* 部件：同 TimeField，另有 Button（打开按钮）、Popover（弹层）、List（Listbox）、Now（“此刻”按钮）。
+*/
+/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */
+/** TimePicker 的样式：popover、list、now */
+var timePickerStyles = css.create({
+	popover: {
+		display: "flex",
+		flexDirection: "column",
+		padding: "_xs"
+	},
+	list: { maxHeight: "16em" },
+	now: { marginTop: "_xs" }
+});
+var minutesOf = (time) => time.hour * 60 + time.minute;
+/** 时间选择器：分段输入 + 按步长列出的时间 */
+var TimePicker = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const value = bindable(_props, "_value", () => null, _ctx.emit);
+	const open = bindable(_props, "_open", () => false, _ctx.emit);
+	const onOpenChange = readonlyProp(_props, "onOpenChange");
+	const step = readonlyProp(_props, "step", 30);
+	const granularity = readonlyProp(_props, "granularity", "minute");
+	const valueType = readonlyProp(_props, "valueType", "iso");
+	const min = readonlyProp(_props, "min");
+	const max = readonlyProp(_props, "max");
+	const isTimeUnavailable = readonlyProp(_props, "isTimeUnavailable");
+	const hourCycle = readonlyProp(_props, "hourCycle");
+	const placement = readonlyProp(_props, "placement");
+	const id = readonlyProp(_props, "id");
+	const disabled = readonlyProp(_props, "disabled");
+	const readonly = readonlyProp(_props, "readonly");
+	const invalid = readonlyProp(_props, "invalid");
+	const required = readonlyProp(_props, "required");
+	const propsRoot = readonlyProp(_props, "propsRoot");
+	const propsButton = readonlyProp(_props, "propsButton");
+	const propsPopover = readonlyProp(_props, "propsPopover");
+	const propsList = readonlyProp(_props, "propsList");
+	const propsNow = readonlyProp(_props, "propsNow");
+	const onKeydown = readonlyProp(_props, "onKeydown");
+	const rest = restProps(_props, _ctx, true);
+	const lang = useLang();
+	const format = useFormat();
+	const locale = useDateLocale();
+	const control = useFieldControl(() => ({
+		id: id.value,
+		invalid: invalid.value,
+		required: required.value,
+		disabled: disabled.value,
+		readonly: readonly.value
+	}), { delegate: true });
+	const setOpen = openSetter(() => open.value, (next) => open.value = next, () => onOpenChange.value);
+	const picker = usePickerPopover(() => ({
+		open: open.value,
+		placement: placement.value,
+		matchWidth: true,
+		editable: !control().disabled && !control().readonly,
+		label: lang.timePickerOpen,
+		size: rest.size
+	}), {
+		toggle: setOpen,
+		shown: (panel) => panel.querySelector("[role=\"listbox\"]")?.focus()
+	});
+	/** 列表的选项：min 到 max，每 step 分钟一项，按语言的小时制显示 */
+	const options = computed(() => {
+		const first = minutesOf(toTime(min.value) ?? new Time(0, 0));
+		const last = minutesOf(toTime(max.value) ?? new Time(23, 59));
+		const result = [];
+		for (let minutes = first; minutes <= last; minutes += Math.max(step.value, 1)) {
+			const time = new Time(Math.floor(minutes / 60), minutes % 60);
+			const iso = toIsoTime(time);
+			result.push({
+				value: iso,
+				label: format.date(iso, {
+					timeStyle: "short",
+					hourCycle: hourCycle.value
+				}),
+				disabled: isTimeUnavailable.value?.(iso, time) ?? false
+			});
+		}
+		return result;
+	});
+	const selected = computed(() => {
+		const time = toTime(value.value);
+		return time ? toIsoTime(time) : void 0;
+	});
+	/** 写回：和当前值同一种类型（Time 或字符串），精确到秒时补 :00 */
+	function write(time, event) {
+		const asTime = value.value != null && typeof value.value !== "string" || valueType.value === "dateValue";
+		value.value = asTime ? time : toIsoTime(time, granularity.value === "second");
+		setOpen(false, "select", event);
+	}
+	/** 此刻（精确到分） */
+	const nowTime = () => {
+		const current = now(locale.timeZone);
+		return new Time(current.hour, current.minute);
+	};
+	/** 此刻能不能选：在 min–max 之内，不是不可选的时间 */
+	function nowAvailable() {
+		const time = nowTime();
+		const low = toTime(min.value);
+		const high = toTime(max.value);
+		return !(low != null && time.compare(low) < 0 || high != null && time.compare(high) > 0 || (isTimeUnavailable.value?.(toIsoTime(time), time) ?? false));
+	}
+	return () => createVNode(Fragment, null, [createVNode(TimeField, mergeProps(rest, {
+		"_value": value.value,
+		"onUpdate:_value": _cache[0] || (_cache[0] = ($event) => value.value = $event),
+		"granularity": granularity.value,
+		"valueType": valueType.value,
+		"min": min.value,
+		"max": max.value,
+		"isTimeUnavailable": isTimeUnavailable.value,
+		"hourCycle": hourCycle.value,
+		"id": id.value,
+		"disabled": disabled.value,
+		"readonly": readonly.value,
+		"invalid": invalid.value,
+		"required": required.value,
+		"onKeydown": _cache[1] || (_cache[1] = (event) => {
+			onKeydown.value?.(event);
+			picker.onKeydown(event);
+		}),
+		"propsRoot": mergePartProps({}, propsRoot.value, { ref: picker.anchorRef }),
+		"suffix": picker.button(Clock, propsButton.value)
+	}), null), picker.panel(timePickerStyles.popover, propsPopover.value, open.value && [createVNode(Listbox, mergePartProps({
+		sx: timePickerStyles.list,
+		"aria-label": lang.timePickerOpen,
+		items: options.value
+	}, propsList.value, {
+		id: `${picker.id}-list`,
+		items: options.value,
+		_value: selected.value,
+		onPick: (iso) => write(parseIsoTime(iso)),
+		required: true
+	}), null), createVNode(Button, mergeProps(mergePartProps({
+		sx: timePickerStyles.now,
+		variant: "ghost",
+		size: "sm",
+		fullWidth: true
+	}, propsNow.value, {
+		disabled: !nowAvailable(),
+		onClick: (event) => write(nowTime(), event)
+	}), { "key": "__site0" }), {
+		default: () => [lang.timePickerNow],
+		$stable: true
+	})])]);
+}, {
+	name: "TimePicker",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"_open",
+		"onUpdate:_open",
+		"onOpenChange",
+		"step",
+		"granularity",
+		"valueType",
+		"min",
+		"max",
+		"isTimeUnavailable",
+		"hourCycle",
+		"placement",
+		"id",
+		"disabled",
+		"readonly",
+		"invalid",
+		"required",
+		"propsRoot",
+		"propsButton",
+		"propsPopover",
+		"propsList",
+		"propsNow",
+		"onKeydown"
+	]
+});
+//#endregion
+export { TimePicker, timePickerStyles };
+
+//# sourceMappingURL=TimePicker.js.map

package/dist/date/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_Fragment","_mergeProps"],"sources":["../../src/date/TimePicker.tsx"],"sourcesContent":["/**\n * 时间选择器：TimeField 加一个打开时间列表的按钮，按 step 列出可选的时间（同 Google 日历的时间下拉）；可以直接键入，也可以点选。\n * 参考 Mantine TimePicker 的 presets、MUI 的 digital clock；列表是 Listbox（↑↓、Home / End、按数字跳转）。\n *\n *   <Field label=\"开会时间\"><TimePicker _value={time} min=\"09:00\" max=\"18:00\" /></Field>\n *   <TimePicker step={15} _value={time} aria-label=\"提醒时间\" />\n *\n * 值同 TimeField（'HH:mm'，或 Time）。列表从 min（默认 00:00）起每 step 分钟一项，到 max 为止，按语言的 12 / 24 小时制显示；\n * 不在列表里的时间（14:47）照样能键入；isTimeUnavailable 的时间在列表里不可用、键入时显示出错。\n * 列表下方“此刻”选当前时间（此刻不可选时不可用）。选好后关闭，焦点回到按钮；Esc、点外部关闭，分段里 Alt + ↓ 打开。\n *\n * 部件：同 TimeField，另有 Button（打开按钮）、Popover（弹层）、List（Listbox）、Now（“此刻”按钮）。\n */\nimport { Clock } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { now, Time } from '@internationalized/date';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useLang } from '../config/context';\nimport { useFormat } from '../config/lang/format';\nimport { useFieldControl } from '../form/Field';\nimport { Listbox, type ListboxProps } from '../input/Listbox';\nimport type { ListboxOption } from '../input/list-state';\nimport { parseIsoTime, toIsoTime } from '../utils/data/date';\nimport { openSetter, type OpenChangeProps } from '../utils/dom/open-change';\nimport { mergePartProps, type PartProps } from '../utils/props';\nimport { useDateLocale } from './date-locale';\nimport { usePickerPopover, type PickerPopoverParts } from './picker-popover';\nimport { TimeField, toTime, type TimeFieldProps, type TimeInput } from './TimeField';\n\n/** 未声明的属性落到这组分段上（主元素）；外壳用 propsRoot */\nexport interface TimePickerProps<V extends TimeInput = string>\n  extends TimeFieldProps<V>, PickerPopoverParts, OpenChangeProps {\n  /** 列表是否打开：父级可写 _open={x} */\n  _open?: boolean;\n  /** 列表里相邻两项相隔几分钟，默认 30 */\n  step?: number;\n  /** 时间列表的部件属性 */\n  propsList?: Omit<Partial<ListboxProps>, 'items' | '_value' | 'onPick'>;\n  /** “此刻”按钮的部件属性 */\n  propsNow?: Omit<Partial<ButtonProps>, 'onClick'>;\n}\n\n/** TimePicker 的样式：popover、list、now */\nexport const timePickerStyles = css.create({\n  popover: { display: 'flex', flexDirection: 'column', padding: '_xs' },\n  // 弹层与输入框同宽，列表最多十来项高，其余滚动\n  list: { maxHeight: '16em' },\n  now: { marginTop: '_xs' },\n});\n\nconst minutesOf = (time: Time) => time.hour * 60 + time.minute;\n\n/** 时间选择器：分段输入 + 按步长列出的时间 */\nexport const TimePicker = _component(\n  <V extends TimeInput>({\n    _value: value = _bindable<V | null>(null),\n    _open: open = _bindable(false),\n    onOpenChange,\n    step = 30,\n    granularity = 'minute',\n    valueType = 'iso',\n    min,\n    max,\n    isTimeUnavailable,\n    hourCycle,\n    placement,\n    id,\n    disabled,\n    readonly,\n    invalid,\n    required,\n    propsRoot,\n    propsButton,\n    propsPopover,\n    propsList,\n    propsNow,\n    onKeydown,\n    ...rest\n  }: TimePickerProps<V>) => {\n    const lang = useLang();\n    const format = useFormat();\n    const locale = useDateLocale();\n    // 输入由里面的 TimeField 接 Field；这里只读状态决定能不能打开面板\n    const control = useFieldControl(() => ({ id, invalid, required, disabled, readonly }), {\n      delegate: true,\n    });\n    const setOpen = openSetter(\n      () => open,\n      (next) => (open = next),\n      () => onOpenChange,\n    );\n    const picker = usePickerPopover(\n      () => ({\n        open,\n        placement,\n        matchWidth: true,\n        editable: !control().disabled && !control().readonly,\n        label: lang.timePickerOpen,\n        size: rest.size,\n      }),\n      {\n        toggle: setOpen,\n        shown: (panel) => panel.querySelector<HTMLElement>('[role=\"listbox\"]')?.focus(),\n      },\n    );\n\n    /** 列表的选项：min 到 max，每 step 分钟一项，按语言的小时制显示 */\n    const options = _derived.by((): ListboxOption[] => {\n      const first = minutesOf(toTime(min) ?? new Time(0, 0));\n      const last = minutesOf(toTime(max) ?? new Time(23, 59));\n      const result: ListboxOption[] = [];\n      for (let minutes = first; minutes <= last; minutes += Math.max(step, 1)) {\n        const time = new Time(Math.floor(minutes / 60), minutes % 60);\n        const iso = toIsoTime(time);\n        result.push({\n          value: iso,\n          label: format.date(iso, { timeStyle: 'short', hourCycle }),\n          disabled: isTimeUnavailable?.(iso, time) ?? false,\n        });\n      }\n      return result;\n    });\n\n    // 当前值正好是列表里的一项时高亮它（只比时分）\n    const selected = _derived.by(() => {\n      const time = toTime(value);\n      return time ? toIsoTime(time) : undefined;\n    });\n\n    /** 写回：和当前值同一种类型（Time 或字符串），精确到秒时补 :00 */\n    function write(time: Time, event?: Event) {\n      const asTime = (value != null && typeof value !== 'string') || valueType === 'dateValue';\n      value = (asTime ? time : toIsoTime(time, granularity === 'second')) as V;\n      setOpen(false, 'select', event);\n    }\n\n    /** 此刻（精确到分） */\n    const nowTime = () => {\n      const current = now(locale.timeZone);\n      return new Time(current.hour, current.minute);\n    };\n    /** 此刻能不能选：在 min–max 之内，不是不可选的时间 */\n    function nowAvailable() {\n      const time = nowTime();\n      const low = toTime(min);\n      const high = toTime(max);\n      return !(\n        (low != null && time.compare(low) < 0) ||\n        (high != null && time.compare(high) > 0) ||\n        (isTimeUnavailable?.(toIsoTime(time), time) ?? false)\n      );\n    }\n\n    return () => (\n      <>\n        <TimeField\n          {...rest}\n          _value={value}\n          granularity={granularity}\n          valueType={valueType}\n          min={min}\n          max={max}\n          isTimeUnavailable={isTimeUnavailable}\n          hourCycle={hourCycle}\n          id={id}\n          disabled={disabled}\n          readonly={readonly}\n          invalid={invalid}\n          required={required}\n          onKeydown={(event) => {\n            onKeydown?.(event);\n            picker.onKeydown(event);\n          }}\n          propsRoot={mergePartProps<PartProps<'div'>>({}, propsRoot, { ref: picker.anchorRef })}\n          suffix={picker.button(Clock, propsButton)}\n        />\n        {picker.panel(\n          timePickerStyles.popover,\n          propsPopover,\n          open && [\n            <Listbox\n              {...mergePartProps<ListboxProps>(\n                { sx: timePickerStyles.list, 'aria-label': lang.timePickerOpen, items: options },\n                propsList,\n                // 在 Field 里时 Listbox 默认取 Field 的控件 id：那是输入框的，列表要自己的 id\n                {\n                  id: `${picker.id}-list`,\n                  items: options,\n                  _value: selected,\n                  onPick: (iso) => write(parseIsoTime(iso)!),\n                  required: true,\n                },\n              )}\n            />,\n            <Button\n              {...mergePartProps<ButtonProps>(\n                { sx: timePickerStyles.now, variant: 'ghost', size: 'sm', fullWidth: true },\n                propsNow,\n                {\n                  disabled: !nowAvailable(),\n                  onClick: (event: MouseEvent) => write(nowTime(), event),\n                },\n              )}\n            >\n              {lang.timePickerNow}\n            </Button>,\n          ],\n        )}\n      </>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/date/calendar-state.d.ts

@@ -0,0 +1,119 @@
+/**
+ * 日历的状态（WAI-ARIA 日期网格的数据层）：焦点日期、显示哪一页、单选 / 区间 / 多选、区间悬停预览、键盘操作。
+ * 不碰 DOM：Calendar 渲染网格，焦点日期那一格 tabindex=0，键盘移动后把焦点移过去。
+ * 参考 React Aria 的 useCalendarState / useRangeCalendarState。
+ *
+ * 三种视图：day（月份网格）、month（一年的各月）、year（一个十年）。unit 是选择的粒度：
+ * Calendar 是 day，MonthPicker 是 month；在比 unit 粗的视图里点一格是“进到这一格”（年 → 月 → 日），不是选中。
+ *
+ *   const calendar = useCalendarState({ mode: () => 'single', selected: () => (date ? [date] : []), onChange, … });
+ *   if (handleCalendarKeydown(calendar, event, isRtl(grid))) event.preventDefault();
+ */
+import { type CalendarDate } from '@internationalized/date';
+import { type DateLimits, type DateRange, type DateUnit, type WeekOptions } from '../utils/data/date';
+/** 日期的选择方式 */
+export interface CalendarSelectionModes {
+    /** 单选一天 */
+    single: unknown;
+    /** 选一个区间：先点开始、再点结束，中间悬停时预览 */
+    range: unknown;
+    /** 多选：每天独立切换 */
+    multiple: unknown;
+}
+/** 日期的选择方式 */
+export type CalendarSelectionMode = keyof CalendarSelectionModes;
+/** useCalendarState 的选项：都是读取函数，props 变化时跟着变 */
+export interface CalendarStateOptions {
+    /** 选择方式 */
+    mode: () => CalendarSelectionMode;
+    /** 已选的日期：单选一个、区间是 [开始, 结束]、多选若干；没有时空数组 */
+    selected: () => readonly CalendarDate[];
+    /** 选了日期：单选 [日期]（再点已选的那天也会调用），区间 [开始, 结束]（已排好序），多选是新的列表 */
+    onChange: (dates: readonly CalendarDate[]) => void;
+    /** 今天（按语言的时区与日历）：没有已选日期时焦点从这里开始 */
+    today: () => CalendarDate;
+    /** 可选范围与不可选的日期 */
+    limits: () => DateLimits;
+    /** 一周的排法：Home / End、月份网格都按它 */
+    week: () => WeekOptions;
+    /** 选择的粒度，默认 day；MonthPicker 是 month，YearPicker 是 year */
+    unit?: () => DateUnit;
+    /** 并排显示几个月（只在 day 视图），默认 1 */
+    visibleMonths?: () => number;
+    /** 区间里允许夹着不可选的日期，默认 false：选了开始之后，越过不可选日期的那一侧都不能再选 */
+    allowsUnavailableInRange?: () => boolean;
+    /** 只读：能翻页、移动焦点，不能改选择 */
+    readonly?: () => boolean;
+    /** 没有已选日期时一开始显示哪天所在的页（如酒店预订默认显示下个月）；不写时是今天 */
+    defaultFocused?: () => CalendarDate | null | undefined;
+}
+/** 一格的状态：渲染与 data 属性用 */
+export interface CalendarCellState {
+    /** 已选（区间里是两端与中间的每一天） */
+    selected: boolean;
+    /** 不能选：范围外、不可选、或区间选到一半时越过了不可选的日期 */
+    disabled: boolean;
+    /** 是不可选的日期（isUnavailable）：画删除线 */
+    unavailable: boolean;
+    /** 今天（这个月、今年） */
+    today: boolean;
+    /** 焦点所在的格：tabindex=0 */
+    focused: boolean;
+    /** 不在这一页：月份网格里补齐的上下月、年份视图里补上的两年 */
+    outside: boolean;
+    /** 区间的开始 */
+    rangeStart: boolean;
+    /** 区间的结束 */
+    rangeEnd: boolean;
+    /** 在区间里（含两端；选到一半时是预览的区间） */
+    inRange: boolean;
+}
+/** 日历的状态与操作 */
+export interface CalendarState {
+    /** 选择方式 */
+    readonly mode: CalendarSelectionMode;
+    /** 当前视图 */
+    readonly view: DateUnit;
+    /** 选择的粒度 */
+    readonly unit: DateUnit;
+    /** 焦点日期：总是精确到天，切到 month、year 视图再回来时回到原来那天 */
+    readonly focused: CalendarDate;
+    /** 当前页的第一格：day 视图是第一个月的 1 日，month 视图是这年 1 月 1 日，year 视图是十年的第一年 */
+    readonly page: CalendarDate;
+    /** day 视图里并排的各月（每月 1 日）；其他视图只有 page */
+    readonly months: readonly CalendarDate[];
+    /** 区间：已选的，或选到一半时从开始到悬停 / 焦点日期的预览 */
+    readonly range: DateRange | null;
+    /** 区间选到一半：已经点了的开始 */
+    readonly anchor: CalendarDate | null;
+    /** 已选的日期有不能选的（范围外、不可选，或区间里夹着不可选的日期） */
+    readonly invalid: boolean;
+    /** 一周的排法 */
+    readonly week: WeekOptions;
+    /** 切换视图（不能比选择的粒度更细） */
+    setView(view: DateUnit): void;
+    /** 移动焦点日期（夹到可选范围内），移出当前页时翻页 */
+    focus(date: CalendarDate): void;
+    /** 翻页：day 视图一次翻并排的月数，month 视图一年，year 视图十年；焦点跟着走 */
+    turnPage(direction: 1 | -1): void;
+    /** 这个方向还能不能翻页（整页都在可选范围之外时不能） */
+    canTurnPage(direction: 1 | -1): boolean;
+    /** 点了一格：当前视图是选择的粒度时选中，否则进到这一格（年 → 月 → 日） */
+    activate(date: CalendarDate): void;
+    /** 指针悬停的日期：区间选到一半时预览；离开网格时传 null */
+    hover(date: CalendarDate | null): void;
+    /** 一格的状态；month 是这格所在的月份网格（判断是不是补齐的上下月） */
+    cell(date: CalendarDate, month?: CalendarDate): CalendarCellState;
+    /** 取消选到一半的区间（Esc） */
+    cancelRange(): void;
+}
+/** 日历状态（组件 setup 里调用） */
+export declare function useCalendarState(config: CalendarStateOptions): CalendarState;
+/**
+ * 日期网格的键盘操作（WAI-ARIA Date Picker Dialog 的网格部分）：
+ * day 视图里 ←→ 一天（从右到左排版时反过来）、↑↓ 一周，Page Up / Down 一个月、加 Shift 一年，Home / End 到这周的第一天 / 最后一天；
+ * month、year 视图里 ←→ 一格、↑↓ 一行（3 格），Page Up / Down 翻一页，Home / End 到这页的两端；
+ * Enter / 空格选中（或进到下一级视图）；Esc 取消选到一半的区间（没有时不处理，交给弹层关闭）。
+ * 返回是否处理了这个按键（处理了就该 preventDefault）
+ */
+export declare function handleCalendarKeydown(state: CalendarState, event: KeyboardEvent, rtl?: boolean): boolean;

package/dist/date/calendar-state.js

@@ -0,0 +1,267 @@
+import { clampDate, compareDates, isDateDisabled, isInRange, isOutOfRange, isOutsideDecade, isSameDate, orderedRange, rangeHasUnavailable, toDayOfWeek } from "../utils/data/date.js";
+import { computed, ref, shallowRef, watch } from "vue";
+import { endOfWeek, startOfWeek } from "@internationalized/date";
+//#region src/date/calendar-state.ts
+/**
+* 日历的状态（WAI-ARIA 日期网格的数据层）：焦点日期、显示哪一页、单选 / 区间 / 多选、区间悬停预览、键盘操作。
+* 不碰 DOM：Calendar 渲染网格，焦点日期那一格 tabindex=0，键盘移动后把焦点移过去。
+* 参考 React Aria 的 useCalendarState / useRangeCalendarState。
+*
+* 三种视图：day（月份网格）、month（一年的各月）、year（一个十年）。unit 是选择的粒度：
+* Calendar 是 day，MonthPicker 是 month；在比 unit 粗的视图里点一格是“进到这一格”（年 → 月 → 日），不是选中。
+*
+*   const calendar = useCalendarState({ mode: () => 'single', selected: () => (date ? [date] : []), onChange, … });
+*   if (handleCalendarKeydown(calendar, event, isRtl(grid))) event.preventDefault();
+*/
+/** 视图从粗到细 */
+var VIEWS = [
+	"year",
+	"month",
+	"day"
+];
+/** 日历状态（组件 setup 里调用） */
+function useCalendarState(config) {
+	const unit = () => config.unit?.() ?? "day";
+	const visibleMonths = () => Math.max(1, config.visibleMonths?.() ?? 1);
+	const view = ref(unit());
+	const anchor = shallowRef(null);
+	const hovered = shallowRef(null);
+	const initial = config.selected()[0] ?? config.defaultFocused?.() ?? config.today();
+	const focused = shallowRef(clampDate(initial, config.limits()));
+	const page = shallowRef(pageOf(focused.value, view.value));
+	/** 日期所在页的第一格 */
+	function pageOf(date, current) {
+		if (current === "year") return date.set({
+			year: Math.floor(date.year / 10) * 10,
+			month: 1,
+			day: 1
+		});
+		if (current === "month") return date.set({
+			month: 1,
+			day: 1
+		});
+		return date.set({ day: 1 });
+	}
+	/** 一页的跨度 */
+	function pageSize(current) {
+		if (current === "year") return { years: 10 };
+		if (current === "month") return { years: 1 };
+		return { months: visibleMonths() };
+	}
+	const pageEnd = () => page.value.add(pageSize(view.value)).subtract({ days: 1 });
+	/** 焦点移出当前页时翻页：往前移出时焦点所在的月排在最后，往后移出时排在最前（同 React Aria） */
+	function followFocus() {
+		const date = focused.value;
+		if (date.compare(page.value) >= 0 && date.compare(pageEnd()) <= 0) return;
+		const backward = date.compare(page.value) < 0;
+		page.value = backward && view.value === "day" ? date.set({ day: 1 }).subtract({ months: visibleMonths() - 1 }) : pageOf(date, view.value);
+	}
+	const limits = computed(() => {
+		const base = config.limits();
+		const start = anchor.value;
+		if (!start || !base.isUnavailable || config.allowsUnavailableInRange?.()) return base;
+		const bound = (step, edge) => {
+			let date = start;
+			for (let offset = 0; offset < 366; offset++) {
+				const next = date.add({ days: step });
+				if (edge && compareDates(next, edge) * step > 0) return edge;
+				if (base.isUnavailable(next)) return date;
+				date = next;
+			}
+			return edge;
+		};
+		return {
+			...base,
+			min: bound(-1, base.min),
+			max: bound(1, base.max)
+		};
+	});
+	const selectedRange = computed(() => {
+		const [start, end] = config.selected();
+		return config.mode() === "range" && start && end ? orderedRange(start, end) : null;
+	});
+	const range = computed(() => {
+		if (config.mode() !== "range") return null;
+		if (!anchor.value) return selectedRange.value;
+		return orderedRange(anchor.value, clampDate(hovered.value ?? focused.value, limits.value));
+	});
+	const invalid = computed(() => {
+		const base = config.limits();
+		if (config.selected().some((date) => isDateDisabled(date, base, unit()))) return true;
+		const picked = selectedRange.value;
+		return picked != null && !config.allowsUnavailableInRange?.() && rangeHasUnavailable(picked, base.isUnavailable);
+	});
+	function select(date) {
+		if (config.readonly?.() || isDateDisabled(date, limits.value, unit())) return;
+		const current = config.selected();
+		const same = (item) => isSameDate(item, date, unit());
+		switch (config.mode()) {
+			case "single":
+				config.onChange([date]);
+				return;
+			case "multiple":
+				config.onChange(current.some(same) ? current.filter((item) => !same(item)) : [...current, date]);
+				return;
+			case "range": {
+				if (!anchor.value) {
+					anchor.value = date;
+					return;
+				}
+				const picked = orderedRange(anchor.value, date);
+				anchor.value = null;
+				hovered.value = null;
+				config.onChange([picked.start, picked.end]);
+			}
+		}
+	}
+	const state = {
+		get mode() {
+			return config.mode();
+		},
+		get view() {
+			return view.value;
+		},
+		get unit() {
+			return unit();
+		},
+		get focused() {
+			return focused.value;
+		},
+		get page() {
+			return page.value;
+		},
+		get months() {
+			if (view.value !== "day") return [page.value];
+			return Array.from({ length: visibleMonths() }, (_, index) => page.value.add({ months: index }));
+		},
+		get range() {
+			return range.value;
+		},
+		get anchor() {
+			return anchor.value;
+		},
+		get invalid() {
+			return invalid.value;
+		},
+		get week() {
+			return config.week();
+		},
+		setView(next) {
+			if (VIEWS.indexOf(next) > VIEWS.indexOf(unit())) return;
+			view.value = next;
+			page.value = pageOf(focused.value, next);
+		},
+		focus(date) {
+			focused.value = isOutOfRange(date, limits.value, view.value) ? clampDate(date, limits.value) : date;
+			followFocus();
+		},
+		turnPage(direction) {
+			if (!state.canTurnPage(direction)) return;
+			const size = pageSize(view.value);
+			const move = (date) => direction > 0 ? date.add(size) : date.subtract(size);
+			page.value = move(page.value);
+			focused.value = clampDate(move(focused.value), limits.value);
+			if (focused.value.compare(page.value) < 0 || focused.value.compare(pageEnd()) > 0) focused.value = clampDate(page.value, limits.value);
+		},
+		canTurnPage(direction) {
+			const { min, max } = config.limits();
+			if (direction < 0) return min == null || page.value.subtract({ days: 1 }).compare(min) >= 0;
+			return max == null || page.value.add(pageSize(view.value)).compare(max) <= 0;
+		},
+		activate(date) {
+			if (view.value === unit()) {
+				state.focus(date);
+				select(date);
+				return;
+			}
+			const finer = VIEWS[VIEWS.indexOf(view.value) + 1];
+			const next = view.value === "year" ? focused.value.set({ year: date.year }) : focused.value.set({
+				year: date.year,
+				month: date.month
+			});
+			view.value = finer;
+			focused.value = clampDate(next, limits.value);
+			page.value = pageOf(focused.value, finer);
+		},
+		hover(date) {
+			hovered.value = date;
+		},
+		cancelRange() {
+			anchor.value = null;
+			hovered.value = null;
+		},
+		cell(date, month) {
+			const current = view.value;
+			const preview = range.value;
+			const inRange = isInRange(date, preview, current);
+			return {
+				selected: config.mode() === "range" ? inRange : config.selected().some((item) => isSameDate(item, date, current)),
+				disabled: isDateDisabled(date, limits.value, current),
+				unavailable: current === "day" && (config.limits().isUnavailable?.(date) ?? false),
+				today: isSameDate(date, config.today(), current),
+				focused: isSameDate(date, focused.value, current),
+				outside: current === "day" ? month != null && !isSameDate(date, month, "month") : current === "year" && isOutsideDecade(date, page.value),
+				rangeStart: preview != null && isSameDate(date, preview.start, current),
+				rangeEnd: preview != null && isSameDate(date, preview.end, current),
+				inRange
+			};
+		}
+	};
+	watch(() => config.selected()[0], (date) => {
+		if (date && (date.compare(page.value) < 0 || date.compare(pageEnd()) > 0)) state.focus(date);
+	});
+	return state;
+}
+/**
+* 日期网格的键盘操作（WAI-ARIA Date Picker Dialog 的网格部分）：
+* day 视图里 ←→ 一天（从右到左排版时反过来）、↑↓ 一周，Page Up / Down 一个月、加 Shift 一年，Home / End 到这周的第一天 / 最后一天；
+* month、year 视图里 ←→ 一格、↑↓ 一行（3 格），Page Up / Down 翻一页，Home / End 到这页的两端；
+* Enter / 空格选中（或进到下一级视图）；Esc 取消选到一半的区间（没有时不处理，交给弹层关闭）。
+* 返回是否处理了这个按键（处理了就该 preventDefault）
+*/
+function handleCalendarKeydown(state, event, rtl = false) {
+	if (event.altKey || event.ctrlKey || event.metaKey) return false;
+	const date = state.focused;
+	const forward = rtl ? -1 : 1;
+	const { locale, firstDayOfWeek } = state.week;
+	const first = toDayOfWeek(firstDayOfWeek);
+	const actions = state.view === "day" ? {
+		ArrowRight: () => state.focus(date.add({ days: forward })),
+		ArrowLeft: () => state.focus(date.subtract({ days: forward })),
+		ArrowDown: () => state.focus(date.add({ weeks: 1 })),
+		ArrowUp: () => state.focus(date.subtract({ weeks: 1 })),
+		PageDown: () => state.focus(date.add(event.shiftKey ? { years: 1 } : { months: 1 })),
+		PageUp: () => state.focus(date.subtract(event.shiftKey ? { years: 1 } : { months: 1 })),
+		Home: () => state.focus(startOfWeek(date, locale, first)),
+		End: () => state.focus(endOfWeek(date, locale, first))
+	} : gridActions(state, forward);
+	actions.Enter = () => state.activate(date);
+	actions[" "] = actions.Enter;
+	if (state.anchor) actions.Escape = () => state.cancelRange();
+	const action = actions[event.key];
+	if (!action) return false;
+	action();
+	return true;
+}
+/** month、year 视图：3 列的网格，一格是一个月或一年 */
+function gridActions(state, forward) {
+	const date = state.focused;
+	const cell = state.view === "month" ? "months" : "years";
+	const pageSize = state.view === "month" ? { years: 1 } : { years: 10 };
+	const by = (amount) => () => state.focus(date.add({ [cell]: amount }));
+	const last = state.view === "month" ? state.page.set({ month: state.page.calendar.getMonthsInYear(state.page) }) : state.page.add({ years: 9 });
+	return {
+		ArrowRight: by(forward),
+		ArrowLeft: by(-forward),
+		ArrowDown: by(3),
+		ArrowUp: by(-3),
+		PageDown: () => state.focus(date.add(pageSize)),
+		PageUp: () => state.focus(date.subtract(pageSize)),
+		Home: () => state.focus(state.view === "month" ? date.set({ month: 1 }) : date.set({ year: state.page.year })),
+		End: () => state.focus(state.view === "month" ? date.set({ month: last.month }) : date.set({ year: last.year }))
+	};
+}
+//#endregion
+export { handleCalendarKeydown, useCalendarState };
+
+//# sourceMappingURL=calendar-state.js.map